ionic lista
La lista es un elemento de interfaz ampliamente utilizado, y se usa en casi todas las aplicaciones móviles.
Las listas pueden contener texto básico, botones, interruptores, iconos y miniaturas, etc.
Los elementos de la lista pueden ser cualquier elemento HTML. El elemento contenedor necesita la clase "list", y cada elemento de la lista debe usar la clase "item".
ionList e ionItem pueden soportar fácilmente varios modos de interacción, como edición deslizante, ordenación por arrastre y eliminación de elementos.
Uso básico:
<ul class="list">
<li class="item">
...
</li>
</ul>
Separador de lista
Podemos usar la clase "item-divider" para crear separadores para la lista. Por defecto, los elementos de la lista se diferencian por un color de fondo distinto y por tener la fuente en negrita, pero también puedes personalizarlo fácilmente.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="../index.html">
Butterfinger
</a>
...
</div>
Lista con iconos
Podemos especificar iconos en el lado izquierdo o derecho de los elementos de la lista.
Usa "item-icon-left" para el icono a la izquierda, y "item-icon-right" para colocarlo a la derecha. Si necesitas iconos en ambos lados, añade ambas clases.
En el siguiente ejemplo, usamos la etiqueta <a> en los elementos de la lista para que cada elemento sea clicable.
Cuando los elementos de la lista usan elementos <a> o <button>, si no se añade un icono a la derecha, se agrega automáticamente una flecha.
En el ejemplo, el primer elemento solo tiene icono a la izquierda, el segundo tiene iconos a ambos lados, el tercero tiene icono a la derecha (también tiene la nota "item-note"), y el cuarto tiene un elemento "badge" (insignia).
<div class="list">
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="../index.html">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
Lista de botones
Usa las clases "item-button-right" o "item-button-left" para colocar botones en los elementos de la lista.
<div class="list">
<div class="item item-button-right">
Call Ma
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
</div>
...
</div>
Lista con avatares
Usa "item-avatar" para crear una lista con avatares:
<div class="list">
<a class="item item-avatar" href="../index.html">
<img src="venkman.jpg.html">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
...
</div>
Lista de miniaturas
La clase "item-thumbnail-left" se usa para añadir una miniatura alineada a la izquierda, y la clase "item-thumbnail-right" para añadir una miniatura alineada a la derecha.
<div class="list">
<a class="item item-thumbnail-left" href="../index.html">
<img src="cover.jpg.html">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
Lista incrustada (inset list)
Podemos incrustar listas dentro de un contenedor; la lista no mostrará el ancho completo.
El estilo de la lista incrustada es "list list-inset". La diferencia con una lista normal es que establece un margen exterior (margin), similar a las pestañas.
La lista incrustada no tiene efecto de sombra, por lo que se ve mejor al desplazarse.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>
Otras extensiones