web-dev-qa-db-fra.com

Icônes alignées à droite et à gauche dans AppBar avec material-ui suivant

Si j'ai un AppBar, comment puis-je faire en sorte qu'un groupe d'icônes plus le logo soit à gauche et un autre groupe d'icônes à droite?

Ex:

  • Gauche: (de gauche à droite) 1 icône de menu, logo
  • Droite: (de droite à gauche) 1 icône de menu, 1 icône d'enregistrement, 1 icône d'édition

Composant 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>
reactjsmaterial-ui
7
cclloyd

Vous pouvez utiliser flexbox pour contrôler l'alignement des éléments dans la barre d'outils ...

Une option consiste à ajouter flex: 1 à l'élément logo. Il s'agrandira pour remplir l'espace disponible dans le conteneur. Tous les éléments après le logo seront alignés à droite.

OR

Utilisation margin-left: auto pour aligner le deuxième groupe de boutons sur le côté droit du conteneur flexible.

Voici un exemple en direct

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>
);
17
Luke Peavey