liste ionique
Liste est un des éléments d'interface largement utilisés, presque toujours à utiliser dans toutes les applications mobiles.
La liste peut être un texte de base, des boutons, des interrupteurs, et d'autres icônes miniatures.
Liste élément peut être un élément HTML. Les éléments conteneurs nécessaires liste de classe, chaque élément de liste est nécessaire catégorie de poste.
ionList ionItem et peut facilement supporter une variété de moyens interactifs, tels que le montage de diapositives, faites glisser le tri, et supprimer des éléments.
Utilisation de base:
<ul class="list">
<li class="item">
...
</li>
</ul>
Liste séparateur
Nous pouvons utiliser la classe élément diviseur pour créer une liste de séparation, par défaut, la liste des éléments dans une couleur de fond différente et caractères gras à distinguer, mais vous pouvez facilement personnaliser son.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
Avec la liste des icônes
Nous pouvons spécifier une icône sur le côté gauche ou à droite de la liste des articles.
Utilisez l'icône élément-icon-gauche dans la gauche, point-icon-droite icône des paramètres sur le côté droit. Si vous avez besoin des deux côtés de l'icône, les deux classes sont ajoutés à.
Les exemples suivants, nous avons utilisé <a> étiquette dans l'élément de la liste, de sorte que chaque cliquable liste d'articles.
élément de la liste lorsque vous utilisez <a> ou élément <button>, si le droit de l'icône est pas ajouté, il sera automatiquement ajouté à flèches.
Exemple, le premier élément que les icônes sur la gauche, à propos de la deuxième icône a, il est le troisième icône à droite (ainsi que des notes élément-note), la quatrième a un badge (marque) éléments.
<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>
liste Boutons
Utilisez un objet bouton droit ou un élément-bouton gauche bouton sur la liste de classe articles.
<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>
Avec Liste Avatar
Utiliser un objet-avatar créer avatar avec une liste:
<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>
Thumbnail List
Thumbnail élément-thumbnail-gauche classe pour ajouter la classe article-thumbnail-droite aligné à gauche est utilisé pour ajouter une vignette sur la droite alignement.
<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>
Liste embarqué (liste d'encart)
Nous pouvons être embarqués dans le récipient parmi une liste, la liste ne présente pas toute la largeur.
liste de style en ligne est la suivante: liste liste EISN, avec une liste générale de différence est qu'il définit la marge (marign), semblable à l'onglet.
listes embarqués sont pas d'ombre, l'effet sera encore mieux lors du défilement.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>