Liste Ionic
La liste est un élément d'interface utilisateur largement utilisé, présent dans presque toutes les applications mobiles.
Les listes peuvent contenir du texte de base, des boutons, des interrupteurs, des icônes, des vignettes, etc.
Les éléments de liste peuvent être n'importe quel élément HTML. L'élément conteneur doit avoir la classe list, et chaque élément de liste doit utiliser la classe item.
ionList et ionItem peuvent facilement prendre en charge diverses méthodes d'interaction, telles que l'édition par balayage, le tri par glisser-déposer et la suppression d'éléments.
Utilisation de base :
<ul class="list">
<li class="item">
...
</li>
</ul>
Séparateurs de liste
Nous pouvons utiliser la classe item-divider pour créer des séparateurs pour la liste. Par défaut, les éléments de liste sont distingués par différentes couleurs d'arrière-plan et des polices en gras, mais vous pouvez facilement la personnaliser.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="../index.html">
Butterfinger
</a>
...
</div>
Liste avec icônes
Nous pouvons spécifier des icônes à gauche ou à droite des éléments de liste.
Utilisez item-icon-left pour placer l'icône à gauche, et item-icon-right pour placer l'icône à droite. Si vous avez besoin d'icônes des deux côtés, ajoutez simplement les deux classes.
Dans l'exemple suivant, nous avons utilisé la balise <a> dans les éléments de liste pour rendre chaque élément de liste cliquable.
Lorsque les éléments de liste utilisent des éléments <a> ou <button>, si aucune icône n'est ajoutée à droite, une flèche sera automatiquement ajoutée.
Dans l'exemple, le premier élément a seulement une icône à gauche, le deuxième élément a des icônes des deux côtés, le troisième élément a une icône à droite (et une annotation item-note), et le quatrième élément a un élément badge.
<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>
Liste de boutons
Utilisez la classe item-button-right ou item-button-left pour placer des boutons dans les éléments de liste.
<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>
Liste avec avatars
Utilisez item-avatar pour créer une liste avec des avatars :
<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>
Liste de vignettes
La classe item-thumbnail-left est utilisée pour ajouter une vignette alignée à gauche, et la classe item-thumbnail-right est utilisée pour ajouter une vignette alignée à droite.
<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>
Liste incrustée
Nous pouvons intégrer une liste à l'intérieur d'un conteneur, et la liste ne s'affichera pas sur toute la largeur.
Le style d'une liste incrustée est : list list-inset. La différence avec une liste normale est qu'elle a des marges définies, similaires à celles des onglets.
Les listes incrustées n'ont pas d'effet d'ombre, ce qui offre de meilleures performances lors du défilement.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>
Autres extensions