Попытка заставить усеченный ящик Material-UI работать в гибком макете - PullRequest
Новая
       40

Попытка заставить усеченный ящик Material-UI работать в гибком макете

0 голосов
/ 10 мая 2018

Я начал с примера кода отсеченного ящика и попытался построить его вокруг. При вставке компонентов в образец (т. Е. Замене '{' Вы думаете, что вода движется быстро? Вы должны видеть лед. '} Другим содержимым) содержимое ограничивается высотой ящика. При попытке вставить содержимое за пределы образца все начинается ниже ящика.

Ожидаемое поведение: возможность размещать содержимое в любом месте вокруг ящика. У меня есть различные компоненты, скрывающиеся / видимые в зависимости от выбора меню в ящике

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

1 Ответ

0 голосов
/ 13 мая 2018

Макет состоит из гибкого контейнера, который содержит Drawer и область основного содержимого. Область содержимого (.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,
    },
  })

Живые примеры (codeandbox)

Постоянный ящик - вырезано под панелью приложения

Постоянный ящик - полная высота

...