Listados

Los listados son un componente muy utilizado en las aplicaciones ya que son muy útiles para mostrar... eso es, una lista de elementos! Permiten incluir desde texto hasta otros elementos más avanzados como iconos, imágenes, botones o toggles. Además se les puede añadir funcionalidades más avanzadas como edición, arrastrar para reordenar, arrastrar para mostrar botones de edición o de borrado, estirar para actualizar, etc.

Para incluir un listado tenemos que usar la directiva <ion-list> y cada elemento del listado lo incluiremos con <ion-item>. Por ejemplo, para crear un listado con elementos tipo texto tendríamos que escribir el siguiente código:

<ion-list>
  <ion-item>Elemento 1</ion-item>
  <ion-item>Elemento 2</ion-item>
  ...
</ion-list>

El listado tendrá que ir dentro de la sección <ion-content> de la página para que funcione el scroll correctamente, ya que en otro caso no se podría arrastrar. Además se recomienda eliminar el atributo "padding" de la etiqueta "ion-content" para que el listado ocupe todo el espacio disponible. En la siguiente figura se puede ver el resultado del código de ejemplo anterior:

Para eliminar las líneas del listado podemos aplicar el atributo "no-lines" en la etiqueta "ion-list".

Listados mediante enlaces o botones

Para crear listados cuyos elementos sean pulsables simplemente tendremos que cambiar los items por botones, aplicando el atributo "ion-item" sobre cada botón para que adapte su apariencia:

<ion-list>
  <button ion-item>Elemento 1</button>
  <button ion-item>Elemento 2</button>
  ...
</ion-list>

Al utilizar botones la apariencia del listado cambiará para algunas plataformas, por ejemplo para iOS aparecerá una flecha en la parte derecha:

Además de botones también podemos usar enlaces tipo "a", aplicándoles también el atributo "ion-item". En ambos casos la apariencia obtenida será la misma.

Cabeceras

Podemos crear cabeceras dentro de una lista para organizar o agrupar mejor los elementos de la misma. Para crear una cabecera simplemente tenemos que utilizar la clase ion-list-header. Estos elementos se mostrarán con un estilo distinto al del resto de elemento (y no serán pulsables). A continuación se incluye un ejemplo:

<ion-list>
    <ion-list-header>Cabecera 1</ion-list-header>
    <button ion-item>Elemento 1</ion-item>
    <button ion-item>Elemento 2</ion-item>
    ...
</ion-list>

Con lo que obtendríamos un resultado similar al de la siguiente figura:

Listados con iconos

Podemos añadir iconos a los elementos de un listado simplemente usando la etiqueta "<ion-icon>" y los atributos "item-start" o "item-end" para indicar que el icono se coloque al inicio o al final del elemento, respectivamente. A continuación se incluye un ejemplo en el que el primer elemento solo tiene un icono alineado a la izquierda, el segundo también tiene un icono pero alineado a la derecha, y en el tercer elemento se ha añadido un icono a cada lado:

<ion-list>
  <ion-item>
    <ion-icon name="leaf" item-start></ion-icon> Elemento 1
  </ion-item>
  <ion-item>
    Elemento 2 <ion-icon name="planet" item-end></ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="flask" item-start></ion-icon>
    Elemento 3
    <ion-icon name="lock" item-end></ion-icon>
  </ion-item>
</ion-list>

Con lo que obtendríamos un resultado como el de la siguiente figura:

Elementos con imágenes tipo Avatars

Además de los iconos podemos mostrar imágenes un poco más grandes que se verán redondeadas, imitando el estilo tipo avatar. Para esto simplemente tenemos que añadir la imagen usando la etiqueta "<item-avatar>" siguiendo la siguiente estructura:

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="assets/imgs/av1.png">
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
  ...
</ion-list>

Mediante el atributo "item-start" indicamos que el avatar se coloque al inicio. Si lo queremos poner al final de la fila podríamos usar en su lugar el atributo "item-end". Además a continuación se han insertado dos líneas de texto, una usando la etiqueta "<h2>" y otra mediante un párrafo, con lo que obtendríamos un resultado similar al de la siguiente imagen:

No es necesario insertar siempre dos líneas de texto ni usar la cabecera tipo h2, podemos indicar solamente una línea de texto o aplicar otros formatos al mismo.

Elementos con imágenes en miniatura (thumbnails)

Además de iconos y avatares también podemos incluir imágenes un poco mas grandes tipo thumbnail. Para esto tenemos que insertar la imagen dentro de la etiqueta "<ion-thumbnail>" e indicar la disposición mediante el atributo "item-start" o "item-end". A continuación se incluye un ejemplo de uso:

<ion-list>
  <ion-item>
    <ion-thumbnail item-start>
      <img src="img/thumbnail-totoro.png">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
    <button ion-button clear item-end>View</button>
  </ion-item>
</ion-list>

En este ejemplo, además de insertar dos líneas de texto con "h2" y "p", se ha añadio un botón alineado a la derecha de cada fila. Si visualizamos este código obtendríamos un resultado similar al de la siguiente figura: