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 mas avanzados como iconos, imágenes, botones o toggles. Además se le podrán 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-item>
    ... 
  </ion-item>
</ion-list>

El listado tendrá que ir dentro de la sección <ion-content> para que funcione el scroll correctamente, ya que en otro caso no se podría arrastrar. A continuación se incluye un ejemplo de una aplicación con listado y una cabecera:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, 
        maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-positive">
        <h1 class="title">Ejemplo de listado</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item>Elemento 1</ion-item>
          <ion-item>Elemento 2</ion-item>
          <ion-item>...</ion-item>
        </ion-list>
      </ion-content>
    </ion-pane>
  </body>
</html>

Con lo que obendríamos un resultado similar al siguiente:

Listados mediante enlaces

También podemos crear listados usando HTML y estilos CSS. Si no necesitamos usar ninguna opción adicional de la directiva para listados esta puede ser una buena opción. Simplemente tendremos que cambiar <ion-list> por <div class="list"> y los elementos del listado por enlaces o campos <div> a los que se le aplique la clase item, por ejemplo:

<div class="list">
  <a class="item" href="enlace.html">
    Elemento 1
  </a>
  ...
</div>

Separadores

Podemos crear separadores dentro de una lista para organizar o agrupar mejor los elementos de la misma. Para crear un separador simplemente tenemos que añadirle la clase item-divider. Estos elementos se mostrarán con un estilo distinto al del resto de elemento. A continuación se incluye un ejemplo:

<ion-list>
    <ion-item class="item-divider">
        Cabecera
    </ion-item>
    <ion-item>Elemento 1</ion-item>
    <ion-item>Elemento 2</ion-item>
    ...
</ion-list>

Con lo que obtendriamos un resultado similar al siguiente:

Listados con iconos

Podemos poner iconos en la parte izquierda o derecha de los elementos de un listado simplemente usando unas clases CSS predefinidas y los iconos incluidos (Ionicons) u otras de otra librería de iconos.

Las clases CSS para la alineación del icono se tienen que aplicar sobre la etiqueta de apertura del elemento de la lista. Si queremos poner un icono en la izquierda tenemos que añadir la clase CSS item-icon-left y para alinearlo a la derecha la clase item-icon-right. Para poner dos iconos, uno alineado a cada lado tenemos que aplicar ambas clases.

A continuación se incluye un ejemplo en el que el primer elemento solo tiene un icono alineado a la izquierda, el segundo tiene a ambos lados, el tercero además tiene una nota a la derecha y en el último se incluye un badge:

<ion-list>
  <ion-item class="item-icon-left">
    <i class="icon ion-email"></i>
    Check mail
  </ion-item>

  <ion-item class="item-icon-left item-icon-right">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </ion-item>

  <ion-item class="item-icon-left">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </ion-item>

  <ion-item class="item-icon-left">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </ion-item>
</ion-list>

Este código se mostraría de la forma:

Elementos con imágenes tipo Avatars

Además de los iconos podemos mostrar imágenes un poco más grandes que se veran redondeadas, imitando el estilo tipo avatar. Para esto simplemente tenemos que añadir la clase CSS item-avatar siguiendo la siguiente estructura:

<ion-list>
    <ion-item class="item-avatar">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </ion-item>
    ...
</ion-list>

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

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 usar la clase item-thumbnail-left si queremos colocarla a la izquierda o la clase item-thumbnail-right para ponerla a la derecha. A continuación se incluye un ejemplo de uso:

<ion-list>
    <ion-item class="item-thumbnail-left">
      <img src="cover.jpg">
      <h2>Weezer</h2>
      <p>Blue Album</p>
    </ion-item>
    ...
</ion-list>

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

PreviousBotones y enlacesNextTarjetas

Last updated