lista iónica
Lista de elementos de la interfaz es un ampliamente utilizado, casi siempre para utilizar en toda aplicación móvil.
La lista puede ser un texto básico, botones, interruptores y otros iconos en miniatura.
elemento de la lista puede ser cualquier elemento HTML. elementos contenedores requeridos lista de clase, cada elemento de la lista se requiere el tipo de posición.
ionList ionItem y puede soportar fácilmente una variedad de formas interactivas, como la edición de diapositivas, arrastre por el estilo, y eliminar elementos.
El uso básico:
<ul class="list">
<li class="item">
...
</li>
</ul>
separador de lista
Podemos utilizar clase de elemento divisor para crear un separador de listas, de forma predeterminada, la lista de elementos en un color de fondo diferente y negrita de distinguir, pero se puede personalizar fácilmente su.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
Con la lista de iconos
Podemos especificar un icono a la izquierda oa la derecha de los elementos de la lista.
Usar icono de elemento-icono-izquierda en la izquierda, punto-icono-derecha icono de configuración en el lado derecho. Si necesita ambos lados del icono, las dos clases se añaden a.
Los siguientes ejemplos, que utilizan <a> etiqueta en el elemento de la lista, de manera que cada elemento de la lista se puede hacer clic.
elemento de la lista cuando se utiliza <a> o <> elemento, si no se añade la derecha del icono, que se añadirá automáticamente a las flechas.
Ejemplo, el primer elemento sólo iconos de la izquierda, sobre el segundo icono tiene, está el tercer icono de la derecha (así como notas punto-nota), el cuarto tiene una insignia elementos (marca).
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<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="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
lista de botones
Utilice el botón de punto-botón-izquierdo tema-button-derecha, o en los elementos de la lista de clases.
<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>
Con la lista de Avatar
Usar elemento-avatar avatar con crear una lista:
<div class="list">
<a class="item item-avatar" href="#">
<img src="venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
...
</div>
Lista de iconos
Miniatura de elemento-miniatura-izquierda de clase para agregar la, clase de elemento-miniatura-derecha alineado a la izquierda se utiliza para añadir una imagen en miniatura en la alineación a la derecha.
<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
Lista incorporado (lista recuadro)
Podemos estar integrada en el contenedor entre una lista, la lista no muestra el ancho total.
Lista de estilo en línea es: Lista lista inserción, con una lista general de diferencia es que se establece el margen (marign), similar a la pestaña.
listas incrustadas hay sombras, el efecto será aún mejor cuando se desplaza.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>