Las listas son uno de los elementos más populares en las webs y en las aplicaciones móviles. En ellas se puede mostrar información diversa, mezclarse con otros elementos HTML para crear diferentes tipos de menús, tabs o solo para romper la monotonía de los textos.

Existen diferentes tipos de listas en Ionic, tal y como vamos a ver en esta entrada, y como siempre su uso es realmente sencillo…

Creando listas en Ionic

De forma general las listas se crean por medio de las etiquetas <ul> ó <ol>  pero podemos generarlas tambien por medio de otros elementos cómo <div>

Lo importante en Ionic son las clases:

• list: para determinar que comienza una lista
• item: para determinar que es un elemento de la lista

De este modo podemos crear una lista de la siguiente forma:

<ul class="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

Que nos da como resultado:

Lista en un contenedor

Cuando necesitamos una lista que se encuentre en un contenedor, debemos de agregar la clase list-inset. Esto introduce un margin y ajusta el tamaño de la lista al contenedor.

<ul class="list list-inset">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

Separadores

Los separadores se utilizan para organizar elementos en grupos lógicos. Para hacer esta labor Ionic tiene una clase llamada item-divider.

El elemento que contenga a esta clase debe de estar contenido dentro de la clase list como elemento normal y manteniendo la clase item.

Los separadores tienen el texto en negrita y por ello se suelen utilizar como encabezados dentro de las listas.

<div class="list">
    <div class="item item-divider">Item Divider 1</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item item-divider">Item Divider 2</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>

Añadir iconos a las listas

Es posible añadir iconos a las listas, al igual que hicimos en los botones.

Cuando añadimos los iconos a los elementos de una lista, tenemos que elegir en que lugar queremos que aparezcan:

• item-icon-left: para que aparezca a la izquierda
• item-icon.right: para que aparezca a la derecha (las dos se pueden combinar para tener dos iconos)
• item-note: para añadir una nota de texto al elemento

<div class="list">
    <div class="item item-icon-left">
        <i class="icon ion-home"></i>
        Icono a la izquierda
   </div>
   <div class="item item-icon-right">
        <i class="icon ion-star"></i>
        Icono a la derecha
   </div>
   <div class="item item-icon-left item-icon-right">
        <i class="icon ion-home"></i>
        <i class="icon ion-star"></i>
        A izquierda y derecha
   </div>
   <div class="item item-icon-left">
        <i class="icon ion-home"></i>
        <span class="text-note">Nota de texto</span>
   </div>
</div>

Añadiendo avatars y thumbnails

La diferencia entre los avatars y los thumbnails es que los avatars son más pequeños.

Los thumbnails cubren el alto completo del elemento y los avatars son imágenes en círculos.

Para utilizar estos elementos es necesario utilizar las clases item-avatar o item-thumbnail y podemos añadirla al lado que queramos utilizando los sufijos -left  o -right.

En el siguiente ejemplo vemos como funcionan:

<div class="list">
    <div class="item item-avatar">
        <img src="img/miguel.png">
        <h3>Avatar</h3>
   </div>
   <div class="item item-thumbnail-right">
        <img src="img/miguel.png">
        <h3>Thumbnail</h3>
   </div>
</div>

Si te ha resultado interesante, no te olvides de compartir y comentar…