Grids en Ionic
Trabajar con los Grids en Ionic es muy sencillo, se utilizan dos clases básicas que son:
- row: para las filas
- col: para las columnas
Podemos trabajar con tantas columnas o filas como queramos, ya que se ajustarán al espacio disponible.
Si ya estás acostumbrad@ a trabajar con bootstrap, no debes de tener problemas para entender cómo funcionan los grids en Ionic
Nota: para mostrar mejor los resultados de esta entrada y poder ver las filas y columnas vamos a utilizar un estilo que marcará con 1px los bordes de la celdas.
Rejillas simples
En este primer ejemplo vamos a ver cómo utilizar las clases row y col de forma sencilla. De este modo vamos a crear dos filas. La primera con 5 columnas y la segunda sólo 3.
En el ejemplo podemos observar claramente cómo el ancho de la columnas es diferente y como se adaptan al ancho de la pantalla.
<div class = "row"> <div class = "col">col 1</div> <div class = "col">col 2</div> <div class = "col">col 3</div> <div class = "col">col 4</div> <div class = "col">col 5</div> </div> <div class = "row"> <div class = "col">col 1</div> <div class = "col">col 2</div> <div class = "col">col 3</div> </div>
Tamaños de la columnas
En muchas ocasiones no querremos que los tamaños de las columnas se asignen automáticamente, y queremos que tengan diferentes anchos. Para ello podemos introducir la clase col-[tamaño], donde tamaño es el porcentaje de ancho de la fila que queremos ocupar.
Este cambio de tamaño sólo se aplica a la columna con tamaño específico aplicado, las demás se redistribuyen en el espacio que aun quede disponible.
En el siguiente ejemplo vemos cómo funciona esta nueva clase y cómo se organizan el resto de columnas
<div class = "row"> <div class = "col col-50">col 1</div> <div class = "col">col 2</div> <div class = "col">col 3</div> <div class = "col">col 4</div> <div class = "col">col 5</div> </div> <div class = "row"> <div class = "col col-50">col 1</div> <div class = "col">col 2</div> <div class = "col">col 3</div> </div>
Posicionamiento horizontal
Las columnas pueden ser compensadas por la izquierda y por la derecha, funcionando igual que con el tamaño de las columnas pero utilizando la clase col-offset-[tamaño].
De este modo en el espacio determinado habrá espacios en blanco.
<div class = "row"> <div class = "col">col 1</div> <div class = "col col-offset-25">col 2</div> <div class = "col">col 3</div> <div class = "col">col 4</div> <div class = "col">col 5</div> </div> <div class = "row"> <div class = "col">col 1</div> <div class = "col col-offset-25">col 2</div> <div class = "col">col 3</div> </div>
Podemos alinear verticalmente las columnas dentro de una fila utilizando las clases:
- row-top: para colocar arriba
- row-center: para colocar a la altura central
- row-bottom: para colocar abajo de la fila
Rejillas responsive
Los grids en Ionic pueden utilizar el diseño responsive. Pensemos que no todos los dispositivos tienen la misma pantalla y que estamos trabajando para tablets y móviles.
Por ello Ionic mantiene en el diseño de rejilla tres clases que sirven para trabajar en este sentido:
- responsive-sm: más pequeño que un teléfono apaisado
- responsive-md: más pequeño que una tablet vertical
- responsive-lg: más pequeño que una tablet apaisada
En el siguiente ejemplo podemos ver como funciona en un móvil apaisado y vertical
<div class = "row responsive-sm"> <div class = "col col-25">col 1</div> <div class = "col">col 2</div> <div class = "col">col 3</div> <div class = "col">col 4</div> <div class = "col">col 5</div> </div> <div class = "row responsive-sm"> <div class = "col">col 1</div> <div class = "col">col 2</div> <div class = "col">col 3</div> </div>
De esta forma ya sabemos cómo crear nuestros grids en Ionic por lo que podemos pensar a imaginar diseños de forma muy intuitiva.
There are 2 Comments.