/layout/grid
El componente BkGrid se adapta al tamaño y la orientación de la pantalla, lo que garantiza la coherencia en todos los diseños. Se basa en un diseño de cuadrícula de 12 columnas.
xs=12
xs=6
xs=6
xs=4
xs=4
xs=4
xs=2
xs=2
xs=2
xs=2
xs=2
xs=2
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
xs=1
<BkGrid container spacing={2}>
<BkGrid item xs={ 12 }>
<Item>xs=12</Item>
</BkGrid>
<BkGrid item xs={ 6 }>
<Item>xs=6</Item>
</BkGrid>
<BkGrid item xs={ 6 }>
<Item>xs=6</Item>
</BkGrid>
<BkGrid item xs={4}>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={4}>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={4}>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={2}>
<Item>xs=2</Item>
</BkGrid>
<BkGrid item xs={2}>
<Item>xs=2</Item>
</BkGrid>
<BkGrid item xs={2}>
<Item>xs=2</Item>
</BkGrid>
<BkGrid item xs={2}>
<Item>xs=2</Item>
</BkGrid>
<BkGrid item xs={2}>
<Item>xs=2</Item>
</BkGrid>
<BkGrid item xs={2}>
<Item>xs=2</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
<BkGrid item xs={1}>
<Item>xs=1</Item>
</BkGrid>
</BkGrid>xs=6 md=8
xs=6 md=4
xs=6 md=4
xs=6 md=8
<BkGrid container spacing={2}>
<BkGrid item xs={6} md={8}>
{children}
</BkGrid>
<BkGrid item xs={6} md={4}>
{children}
</BkGrid>
<BkGrid item xs={6} md={4}>
{children}
</BkGrid>
<BkGrid item xs={6} md={8}>
{children}
</BkGrid>
</BkGrid> Hay lauouts definidos desde UI/UX, donde será necesario que en las queries de pantalla deseadas, el grid tenga un comportamiento de contenedor NO APILABLE y con SCROLL horizontal. Para estos casos, hemos creado la prop overflowHorizontally, que acepta los breakpoints definidos en el theme del proyecto: ["xs", "mobile", "sm", "md", "lg", "xl"].
Se ha modificado la apariencia del scroll horizontal para que se ajuste al look and feel theme. Además, hemos añadido las props paddingX y paddingY para que desde diseño tengan la libertad de añadir espacio dentro del grid. Estas props sólo estarán presentes en el caso en que overflowHorizontally sea utilizado.
En el ejemplo a continuación, las columnas serán apilables sólo en el breakpoint xl, en el resto funcionará como una fila de elementos. Puedes modificar el ancho del navegador para verlo en acción.
xs=4
xs=4
xs=4
xs=4
xs=4
xs=4
<BkGrid container spacing={2} overflowHorizontally="lg" paddingY={ 2 }>
<BkGrid item xs={ 5 } xl={ 4 }>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={ 5 } xl={ 4 }>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={ 5 } xl={ 4 }>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={ 5 } xl={ 4 }>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={ 5 } xl={ 4 }>
<Item>xs=4</Item>
</BkGrid>
<BkGrid item xs={ 5 } xl={ 4 }>
<Item>xs=4</Item>
</BkGrid>
</BkGrid> | Nombre | Type | Default | Reuqerido | Descripción |
|---|---|---|---|---|
| children | node | Contenido del componente. | ||
| overflowHorizontally | "xs", "mobile", "sm", "md", "lg", "xl" | Breakpoint en que se modifica el grid y pasa de ser "wrap" a "nowrap". | ||
| paddingX | number | Valor del padding X. | ||
| paddingY | number | Valor del padding Y. |