13

使用 Material UI,我如何构建一个带有可扩展菜单项的抽屉,比如material-ui.com网站上的那个?

所以我想要这样的东西: 在此处输入图像描述

每个菜单项(粗体)都可以展开以显示子菜单项。

如何使用 Material UI 实现这一点?

4

1 回答 1

14

你需要一个函数打开和关闭折叠

 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>
)

演示 https://material-ui.com/components/lists/#simple-list

于 2019-07-19T17:32:23.313 回答