使用 Material UI,我如何构建一个带有可扩展菜单项的抽屉,例如 material-ui.com 上的菜单项网站?
每个菜单项(以粗体显示)都可以展开以显示子菜单项。
如何使用 Material UI 来实现这一点?
最佳答案
你需要一个打开和关闭折叠的功能
const [openCollapse, setOpenCollapse] = React.useState(false);
function handleOpenSettings(){
setOpenCollapse(!openCollapse);
}
return(
<Drawer>
<ListItem button onClick={handleOpenSettings}>
<ListItemIcon>
<Settings />
</ListItemIcon>
<ListItemText primary="Settings" />
{openCollapse ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={openCollapse} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemIcon>
<Settings />
</ListItemIcon>
<ListItemText inset primary="Starred" />
</ListItem>
</List>
</Collapse>
</Drawer>
)
关于reactjs - Material 用户界面 : drawer with expandable side menu,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51085379/