Сделайте так, чтобы ящик для пользовательского интерфейса материала оставался одинаковым по размеру вместо изменения размера при изменении размера контента. - PullRequest
Новая
       34

Сделайте так, чтобы ящик для пользовательского интерфейса материала оставался одинаковым по размеру вместо изменения размера при изменении размера контента.

1 голос
/ 02 июля 2019

Я использую Material UI с выдвижным ящиком.

Внутри ящика находится набор складных списков. Когда я раскрываю список, текстовые элементы списка могут быть довольно длинными, и ящик выскакивает гораздо шире. Я хотел бы, чтобы ширина выдвижного ящика составляла 30% от размера окна, но когда я пытаюсь установить классы на выдвижном ящике, ни root, ни модальные classNames, кажется, не удерживают ширину выдвижного ящика.

Это код ящика: 

<Drawer classes={drawerClasses} open={showStandardDrawer} anchor={"right"} onClose={closeDrawer}>

 {Array.from(items).map((item, index) => {
      return (
      <List
          key={`list-${index}`}
          component="div"
          aria-labelledby="nested-list-subheader"
          subheader={
             <ListSubheader component="div" id="nested-list-subheader">
                 {item.title}
             </ListSubheader>
          }
          className={classes.root}
      >
         { item.elements.map((el, index) => {
             return (
              <React.Fragment key={index}>
                  <ListItem key={index} button onClick={() => handleExpand(index)}>
                     <ListItemText primary={el.name} />
                          {open[index] ? <ExpandLess /> : <ExpandMore />}
                  </ListItem>
                  <Collapse in={open[index]} timeout="auto" unmountOnExit>
                      { el.descriptions.map((description, index) => {
                           return (
                               <List key={`l-${index}`} component="div" disablePadding>
                                 <ListItem button className={classes.nested} >
                                     <ListItemIcon>
                                        <StarBorder />
                                     </ListItemIcon>
                                     <ListItemText primary={description} primaryTypographyProps={{noWrap:true, width:'200px'} } />
                                   </ListItem>
                                </List>
                          )})
                    }
                    </Collapse>
               </React.Fragment>
            )
       })}
     </List>
    )
    })}
</Drawer>

и это классы, применяемые к ящику ('pocketClasses'): 

{
    root: {
        maxWidth: '200px',
        minWidth: '50%',
        width: '50%',
        overflow: 'hidden'
    },
    modal: {
        maxWidth: '50%',
        minWidth: '50%',
        width: '50%'
    }
}

Это не те стили, которые мне обязательно нужны, я просто пытаюсь понять, смогу ли я получить Drawer для определения его размера, вместо того, чтобы определять размеры его дочерних элементов.

1 Ответ

1 голос
/ 02 июля 2019

Вместо modal используйте класс paper.Элемент Paper внутри ящика является основным видимым контейнером.Классы root и modal применяются к элементам-оберткам, которые расположены таким образом, что их ширина не обязательно влияет на ширину бумаги.

Вот фрагмент кода из ящика Permanentдемо : 

const useStyles = makeStyles(theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
}));

...

      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >

https://codesandbox.io/s/zxljh

...