时间戳

首页 > 解决方案 > 试图让 Material-UI 剪辑抽屉在 flex 布局中工作

material-ui - 试图让 Material-UI 剪辑抽屉在 flex 布局中工作

问题描述

我从裁剪的抽屉示例代码开始，并尝试围绕它进行构建。在样本中插入组件时（即，将'{'你认为水移动得很快？你应该看到冰块。'} 用其他内容代替），内容受抽屉高度的限制。当尝试在 sample 之外插入内容时，一切都从抽屉下方开始。

预期行为：能够将内容放置在抽屉周围的任何位置。根据抽屉菜单选择，我有不同的组件隐藏/变得可见

我最初从永久抽屉示例开始，一切正常，除了我需要将抽屉放在应用栏下方。

标签： material-uidrawer

解决方案

布局由一个包含Drawer主要内容区域的 flex 容器组成。内容区域 ( .appContent) 扩展以填充抽屉右侧（或左侧）的空间。您的所有内容都应放置在此元素内。

更新：修复了适用于 IE 11 的样式

基本结构：

<div className={classes.root}>
  <AppBar position="fixed" className={classes.appBar} />
  <Drawer 
    variant="permanent"
    className={classes.drawer}
    classes={{ paper: classes.drawerPaper }} 
  />
  <main className={classes.appContent}>
    {/* Page content goes here */}
  </main>
</div>

款式 

const styles = theme => ({
  // The main flex container for the app's layout. Its min-height
  // is set to `100vh` so it always fill the height of the screen.
  root: {
    display: "flex",
    minHeight: "100vh",
    zIndex: 1,
    position: "relative",
    overflow: "hidden",
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1
  },
  // Styles for the root `div` element in the `Drawer` component.
  drawer: {
    width: theme.layout.drawerWidth
  },
  // Styles for the `Paper` component rendered by `Drawer`.
  drawerPaper: {
    width: "inherit",
    paddingTop: 64  // equal to AppBar height (on desktop)
  },
  // Styles for the content area. It fills the available space
  // in the flex container to the right (or left) of the drawer.
  appContent: theme.mixins.gutters({
    // https://github.com/philipwalton/flexbugs#flexbug-17
    flex: '1 1 100%', // Updated to fix IE 11 issue
    maxWidth: "100%",
    paddingTop: 80,   // equal to AppBar height + 16px
    margin: '0 auto',
    // Set the max content width for large screens
    [theme.breakpoints.up('lg')]: {
      maxWidth: theme.breakpoints.values.lg,
    },
  })

现场示例（codesandbox）

永久抽屉 - 夹在 appbar 下方

永久抽屉 - 全高

推荐阅读