Listados y rejillas

Los listados son la forma más común de mostrar varios items en un dispositivo móvil. Es cómodo para la visualización y además fácil para la usabilidad. El dedo puedde tocar en cualquier parte del item para seleccionarlo.

En algunos casos también se utilza la vista rejilla o grid. Se suele utilizar cuando el elemento es más visual, como podría ser una colección de imagenes. A veces también se suelen utilizar con texto, pero en tablets, ya que en móviles suele quedar algo pequeño para la vista.

Listados

Para construir un listado en Ionic es tan sencillo como ver el siguiente ejemplo:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

Como podemos ver, tenemos el elementu <ul> para la lista, y el <li> para cada elemento de ella.

Además, Ionic proporciona también divisores. Estos se utilizan para separar unos items de otros, en grupos con ítems que están relacionados entre sí por algo. Como podrían ser una lista de eventos, y utilizar como divisor la fecha del mismo.

Ejemplo de divisor

<div class="item item-divider">
    Titulo divisor
</div>

Existen algunos diseños básicos hechos para los items de las listas. Vamos a ver un ejemplo de item que tiene una imagen, titulo y descripción:

 <a class="item item-thumbnail-left" href="#">
    <img src="cover.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
</a>

Ver más información sobre listados

Grid

El sistema de grid o rejilla que utiliza Ionic es muy similar al de bootstrap u otros. Se base en filas (row) y dentro columnas (col).

Ejemplo básico

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

El código de arriba representa una fila que contiene tres columnas. Estas ocuparán todas el mismo ancho hasta llenar el ancho de la pantalla.

También podemos añadir alguna de las siguientes clases para concretar el ancho de alguna de ellas.

Esto nos permite poder hacer vistas en forma de grid de manera muy fácil y muy potente. Pero tiene el inconveniente que siempre el número de columnas en la row, será el que hayamos definido.

¿Cómo podemos hacer un grid responsive para que por ejemplo un móvil se vean dos columnas y en una tableta cuatro?

Muy sencillo: es lo que llamamos grid responsive. Ionic también está preparado para ello.

Ejemplo de grid responsive:

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>