web-dev-qa-db-fra.com

Quelle est la bonne façon de flotter à droite ou à gauche à l'aide de la barre de menus material-ui avec material-ui-next?

Je ne peux pas savoir si j'utilise la bonne approche pour que les boutons de connexion/déconnexion se faufilent tout en utilisant material-ui-next ("material-ui": "^ 1.0.0-beta.22", )

Il semble qu'ils aient enlevé iconElementRight= de l'api. Devons-nous utiliser le <Grid> maintenant dans la barre de menu? Il se sent un peu boueux. Quelle est la bonne façon de faire flotter des boutons (par exemple, connexion) dans la barre d’application?

<AppBar position="static">
      <Toolbar>
        <Grid container spacing={24}>
          <Grid item xs={11}>
            <Typography type="title" color="inherit">
              Title
            </Typography>
          </Grid>

          <Grid item xs={1}>
            <div>
              <HeartIcon />
              <Button raised color="accent">
                Login
              </Button>
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>

enter image description here

reactjsmaterial-designmaterial-ui
26
Kyle Pennell

@Kyle Vous avez eu raison :)

ajoutez simplement au conteneur de grille:

justifier = "espace-entre"

Avec votre exemple:

<AppBar position="static">
  <Toolbar>
    <Grid
      justify="space-between" // Add it here :)
      container 
      spacing={24}
    >
      <Grid item>
        <Typography type="title" color="inherit">
          Title
        </Typography>
      </Grid>

      <Grid item>
        <div>
          <HeartIcon />
          <Button raised color="accent">
            Login
          </Button>
        </div>
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>
19
Idan Dagan

Vous devez ajouter flex: 1 à ton <Typography /> _ composant donc il pousse le <div /> à la partie la plus à droite de la barre d’application:

<AppBar position="static">
  <Toolbar>
    <Typography type="title" color="inherit" style={{ flex: 1 }}>
      Title
    </Typography>
    <div>
      <HeartIcon />
      <Button raised color="accent">
        Login
      </Button>
    </div>
  </Toolbar>
</AppBar>
32
jaye