Добавить значок отмены для закрытия окна Material-UI Drawer - PullRequest
Новая
       37

Добавить значок отмены для закрытия окна Material-UI Drawer

0 голосов
/ 11 октября 2018

Я использую IconButton с атрибутом onClick, чтобы захватить событие, чтобы закрыть постоянный правый ящик.Все это прекрасно работает как: 

const styles = {
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
  close: {
    margin: 10,
    opacity: 0.7,
  }
};

class ContextDrawer extends Component {

  render() {
    const { classes } = this.props;

    const sideList = (
      <div className={classes.list}>
        <CheckedList />
      </div>
    );

    return (
      <div>
        <Drawer
          variant="persistent"
          anchor="right"
          open={this.props.open}
        >
          <div
            tabIndex={0}
            role="button"
          >
          <IconButton onClick={this.props.closeContextDrawer}>
            <CancelIcon className={classes.close} />
          </IconButton>
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

export default withStyles(styles)(ContextDrawer);

`` `

, что дает мне это:

enter image description here

Однако style={{ float: 'right' }} на IconButton приводит к щелчку на значке, который больше не вызывает действие, и вместо этого к красной рамке верхней части ящика:

enter image description here

Есть ли лучший способ показать значок закрытия ящика?

1 Ответ

0 голосов
/ 12 октября 2018

С IconButton, обернутым в DialogTitle и с определенным классом в DialogTitle, у меня есть работоспособное решение: 

  <Drawer
    variant="persistent"
    anchor="right"
    open={this.props.open}
  >
  <DialogTitle disableTypography className="drawerTitle">
    <IconButton onClick={this.props.closeContextDrawer}>
        <CancelIcon />
    </IconButton>
  </DialogTitle>
    {sideList}
  </Drawer>

, а css: 

.drawerTitle {
  display: flex;
  justify-content: flex-end;
  padding: 0 !important;
}

производит:

enter image description here

Обновление

Есть более приятный и понятный способ сделать это, по крайней мере, для левой стороны ивыдвижные ящикиВы можете использовать: 

  <div className={classes.drawerHeader}>
    <IconButton onClick={closeDrawer}>
      <ChevronLeftIcon />
    </IconButton>
  </div>
  </Divider>

, который даст вам это:

enter image description here

CSS, который я использовал для заголовка:: 

const styles = theme => ({
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  ..

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

...