0
250
ViewsNo se puede alinear el divisor entre los elementos de la cuadrícula
Quiero tener Divider entre elementos de Grid .
La salida debería ser así: -
columna 1 | columna 2 | columna 3
Aunque en mi código no puedo ver el Divider y también los elementos están alineados de manera vertical.
import "./styles.css"; import { Grid, Divider } from "@material-ui/core"; export default function App() { const tempArray = ['Col 1', 'Col 2', 'Col 3']; return( <Grid container align='center' direction='column'> {tempArray.map((title)=>{ return( <Grid container direction='row'> <Grid item xs> <strong>{title}</strong> </Grid> <Divider orientation='vertical' flexItem></Divider> </Grid> ); } )} </Grid> ); } Además, no estoy seguro de cómo puedo omitir el divisor para el último elemento.
Aquí está el enlace de sandbox de código.
2 answers
Answer question0
Los Grid dentro del contenedor de Grid deben tener el accesorio xs establecido en true para permitirle compartir el espacio disponible ( docs ). De lo contrario, intentará ocupar todo el ancho de la ventana gráfica, que es el comportamiento predeterminado.
No estoy seguro de cómo puedo omitir el divisor para el último elemento.
Puede representar el Divider condicionalmente en función del índice actual:
{i !== tempArray.length - 1 && ( <Divider orientation="vertical" flexItem></Divider> )}Código de trabajo completo:
<Grid container align="center"> {tempArray.map((title, i) => { return ( <Grid key={title} item container xs /* <------------------ add this */> <Grid item xs> <strong>{title}</strong> </Grid> {i !== tempArray.length - 1 && ( <Divider orientation="vertical" flexItem></Divider> )} </Grid> ); })} </Grid> 
0
Puedo alinearlo horizontalmente.
índice.js
import "./styles.css"; import { Grid, Divider } from "@material-ui/core"; export default function App() { const tempArray = ["Col 1", "Col 2", "Col 3"]; return ( <Grid container align="center" direction="column"> <Grid container direction="row"> {tempArray.map((title, index) => { return ( <Grid item xs key={index}> <strong>{title}</strong> <Divider orientation="vertical" flexItem></Divider> </Grid> ); })} </Grid> </Grid> ); }