Пользовательский интерфейс материала: ящик с расширяемым боковым меню - PullRequest
Новая
       16

Пользовательский интерфейс материала: ящик с расширяемым боковым меню

0 голосов
/ 28 июня 2018

Используя пользовательский интерфейс материалов, как я могу создать ящик с расширяемыми элементами меню, такими как на сайте material-ui.com ?

Итак, я хочу что-то вроде этого: enter image description here

Каждый пункт меню (выделен жирным шрифтом) может раскрываться для отображения пунктов подменю.

Как этого можно достичь с помощью пользовательского интерфейса материала?

1 Ответ

0 голосов
/ 19 июля 2019

вам нужна функция открытия и закрытия свернуть 

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

DEMO https://material -ui.com / компоненты / списки / # простой список

...