0
232
Vistas¿Cuál es la forma correcta de flotar hacia la derecha o hacia la izquierda usando la barra de aplicaciones material-ui con material-ui-next?
No puedo averiguar si estoy usando el enfoque correcto para que los botones de inicio/cierre de sesión floten mientras uso material-ui-next ("material-ui": "^1.0.0-beta.22", )
Parece que eliminaron iconElementRight= de la API. ¿Tenemos que usar la <Grid> ahora en la barra de aplicaciones? Se siente un poco torpe. ¿Cuál es la forma correcta de hacer flotar los botones (por ejemplo, iniciar sesión) en la barra de aplicaciones?
<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> 
3 Respuestas
Responde la pregunta0
@Kyle Tenías razón :)
simplemente agregue al contenedor de cuadrícula:
justificar = "espacio entre"
Con tu ejemplo:
<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>0
Debe agregar flex: 1 a su componente <Typography /> para que empuje el <div /> a la parte más a la derecha de la AppBar:
<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>0
Simplemente use la propiedad align="right" como se muestra aquí https://mui.com/api/typography/