Чекмедже на цял екран с material-ui@next

Как да пресъздам чекмедже на цял екран от първата material-ui версия във версията @next?

Преди можех да правя това

<Drawer width={'100%'} open={this.props.eventsDrawer} className="events-drawer">
...
</Drawer>

Но сега не виждам начин да направя това? Ще трябва ли да използвам CSS, за да постигна това, и ако да към кой елемент да го приложа?


material-ui
person Jordan    schedule 07.12.2017    source източник

Отговори (1)


arrow_upward
5
arrow_downward

Демото на Responsive Drawer показва как можете да оразмерите чекмеджето с помощта на класове. Ето съкратена версия на тази демонстрация:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';

const styles = {
  drawerPaper: {
    width: '100%',
  },
};

const ResponsiveDrawer = ({ classes }) => (
  <div>
    <Drawer
      type="temporary"
      classes={{
        paper: classes.drawerPaper,
      }}
    >
      ...
    </Drawer>
  </div>
);

export default withStyles(styles)(ResponsiveDrawer);

Drawer ще се огъне, за да запълни контейнера си, така че за да промените размера му, обвивате Drawer и прилагате клас към обвивката.

В тази демонстрация ние дефинираме клас в обекта styles с помощта на JSS и използваме компонента от по-висок ред withStyles, за да предоставим на компонента ResponsiveDrawer обект класове.

withStyles също ще приеме фабрична функция, което бихте направили, ако трябва да препратите към променливи на тема. Това се прави в пълната версия на тази демонстрация.

Този подход е описан по-подробно в Замяна с класове.

person Ken Gregory    schedule 09.12.2017