onglet ionique (onglet)
onglet ionique (Tab) est des boutons ou liens alignés horizontalement pour naviguer entre les pages changent. Il peut contenir une combinaison de texte et des icônes sur un appareil mobile est une méthode populaire de navigation.
Utilisez les onglets onglets classes de conteneurs suivants, chaque onglet en utilisant la classe tab-élément. Par défaut, l'onglet est le texte et aucune icône.
Exemples
<div class="tabs">
<a class="tab-item">
主页
</a>
<a class="tab-item">
收藏
</a>
<a class="tab-item">
设置
</a>
</div>
Par défaut, la couleur de l'onglet est la valeur par défaut, vous pouvez définir les différents styles de couleurs suivantes: onglets-défaut, les onglets-lumière, onglets-stables, onglets-positifs, onglets-calme, onglets équilibré, onglets hors tension, onglets-assertive, onglets -Royal, onglets-foncé.
Pour masquer la barre d'onglets, vous pouvez utiliser la classe onglets-item-hide.
onglet Icône
Après la classe d'ajouter des onglets onglets-icon-only classes peuvent être configurés pour afficher uniquement l'onglet icône.
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
Top icône + onglet texte
Après la classe pour ajouter des onglets onglets-icon-top classe icône + texte peut être fixé à la partie supérieure de l'onglet.
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
Gauche du + onglet texte de l'icône
Après la classe d'ajouter des onglets onglets-icon-gauche icône sur le côté gauche de la classe peut être définie à l'onglet texte +.
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
onglet Style rayé
Vous pouvez ajouter un motif de pattes-rayures sur le nom de l'élément avec des onglets pour obtenir des onglets de style comme Android. Vous pouvez également ajouter des onglets-dessus pour atteindre l'onglet en haut de la page.
Stripes onglet couleur peut être contrôlée par onglets-background- {color} et tabs-couleur- {color}, {color} valeur peut être: par défaut, léger, stable, positif, calme, équilibrée, énergique, autoritaire, royal, ou sombre.
Remarque: Si la tête du titre sur l'onglet à nouveau, vous devez utiliser la classe a-onglets-top.
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
Les résultats d'exploitation sont les suivantes: