Выровненные по правому и левому краю значки в AppBar со следующим - PullRequest
Новая
       10

Выровненные по правому и левому краю значки в AppBar со следующим

0 голосов
/ 25 апреля 2018

Если у меня есть AppBar, как я могу сделать так, чтобы одна группа значков плюс логотип были слева, а другая группа значков справа от нее?

Пример:

  • Слева: (слева направо) 1 значок меню, логотип
  • Справа: (справа налево) 1 значок меню, 1 значок сохранения, 1 значок редактирования

Компонент AppBar: 

<AppBar
            className={classNames(classes.appBar, {
                [classes.appBarShift]: open,
                [classes[`appBarShift-left`]]: open,
                [classes[`appBarShift-right`]]: !tools,
            })}
            position='static'
        >
            <Toolbar className={classNames(classes.topBar)}>
                <IconButton
                    color="inherit"
                    aria-label="open drawer"
                    onClick={this.handleDrawerToggle}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon />
                </IconButton>
                <Typography variant="title" color="inherit" noWrap>React App</Typography>
                <IconButton
                    color="inherit"
                    aria-label="open tool drawer"
                    onClick={this.handleToolDrawerToggle}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon />
                </IconButton>
            </Toolbar>
        </AppBar>

1 Ответ

0 голосов
/ 30 апреля 2018

Вы можете использовать flexbox для управления выравниванием элементов на панели инструментов ...

Один из вариантов - добавить flex: 1 к элементу логотипа.Это расширится, чтобы заполнить доступное пространство в контейнере.Все элементы после логотипа будут выровнены вправо.

ИЛИ

Используйте margin-left: auto, чтобы выровнять вторую группу кнопок с правой стороны гибкого контейнера.

Вот живой пример 

const styles = {
  // this group of buttons will be aligned to the right side
  toolbarButtons: {
    marginLeft: 'auto',
  },
};

const Demo = ({ classes }) => (
  <AppBar position="static">
    <Toolbar>
      <IconButton color="inherit">
        <MenuIcon />
      </IconButton>
      <Typography variant="title" color="inherit">Title</Typography>
      <div className={classes.toolbarButtons}>
        <IconButton color="inherit"><EditIcon /></IconButton>
        <IconButton color="inherit"><SaveIcon /></IconButton>
        <IconButton color="inherit"><MoreVertIcon /></IconButton>
      </div>
    </Toolbar>
  </AppBar>
);
...