材质UI抽屉不会在Appbar下移动 [英] Material UI Drawer won't move under Appbar

问题描述

我下面有一个应用栏和一个抽屉.在这两个组件下，我都有3个带有引导程序的divs，在每个div中，我都有一组按钮.

I have an Appbar and a drawer right beneath it. Under both components I have 3 divs with bootstrap and in each div I have a group of buttons.

问题在于抽屉盖住了应用栏，我似乎无法移动它.

The problem is that the Drawer covers the Appbar and I just can't seem to move it.

这是我的代码:

<div className="App">

        <AppBar position="static">
          <Toolbar>
              <IconButton color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" aria-label="Menu">
                title
              </Typography>
          </Toolbar>
        </AppBar>

        <Drawer
          variant="permanent"
          style={{width: '100%', zIndex: '1400', position:'absolute'}}
        >
          <Button>1</Button>
          <Button>2</Button>
          <Divider />
          <Button>1</Button>
          <Button>2</Button>
        </Drawer>
        <br />
        <div className="container-full">
          <div className="row">
            <div class="col-sm-6">  
              <GridList cellHeight={50} className={styles.gridList} cols={5}>

                <Button style={{width: '150px', border: '1px solid'}} variant="raised" color="primary">
                  <div 
                  style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
                    Mohnweckerl Wiener Gouda
                  </div>
                </Button>

在第一个引导列之后，接着是另一个"col-sm-4"，然后是一个"col-sm-2".这些按钮位于GridList

After the first bootstrap column, another "col-sm-4" follows and then a "col-sm-2". The buttons are in a GridList

这是视觉的

抽屉应该从箭头相交的地方开始.

The Drawer should start where the arrows meet.

有什么想法吗?

推荐答案

Material-UI文档称在应用程序栏下方剪切.要实现它，您首先必须为AppBar您的styles对象定义一个z-index:

The Material-UI docs call that a Drawer that's been clipped under the app bar. To achieve it, you first have to define a z-index for your AppBar your styles object:

const styles = theme => ({
  appBar: {
    // Make the app bar z-index always one more than the drawer z-index
    zIndex: theme.zIndex.drawer + 1,
  },
});

然后将其应用于AppBar组件:

<AppBar position="absolute" className={classes.appBar}>

由于您的抽屉现在位于AppBar的下方，因此您需要将抽屉中的内容向下移动到屏幕下方，以使其不会隐藏在条形下方.您可以使用theme.mixins.toolbar完成.首先，添加toolbar样式:

Since your drawer is now underneath the AppBar, you'll need to move the content in the drawer down the screen so that it is not hidden underneath the bar. You can accomplish that with theme.mixins.toolbar. First, add the toolbar styles:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  // Loads information about the app bar, including app bar height
  toolbar: theme.mixins.toolbar,
});

然后，将以下div作为内容的第一部分添加到您的抽屉中:

Then, add the following div as the very first piece of content in your drawer:

<Drawer>
  // Make sure this div is the first piece of content in your drawer
  <div className={classes.toolbar} />

  // Put your other drawer content here like you normally would
</Drawer>

toolbar样式将从当前theme加载有关应用栏高度的信息，然后调整div的大小，以确保内容不会被应用栏隐藏.

The toolbar style will load information about the app bar height from the current theme and then size the div so that it ensures the content doesn't get hidden by the app bar.

您可以找到完整的代码示例此处.

You can find a full code sample here.

这篇关于材质UI抽屉不会在Appbar下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！