Onglet Ionic

Les onglets Ionic sont des boutons ou des liens disposés horizontalement pour basculer entre les pages. Ils peuvent contenir une combinaison de texte et d'icônes et constituent une méthode de navigation populaire sur les appareils mobiles.

Le conteneur d'onglets ci-dessous utilise la classe tabs, et chaque onglet utilise la classe tab-item. Par défaut, les onglets sont uniquement textuels et n'ont pas d'icônes.

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 des onglets est la couleur par défaut. Vous pouvez définir les différents styles de couleur suivants : tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs-royal, tabs-dark.

Pour masquer la barre d'onglets, vous pouvez utiliser la classe tabs-item-hide.

Onglets avec icônes

Ajouter la classe tabs-icon-only après la classe tabs configurera les onglets pour afficher uniquement des icônes.

<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>

Onglets avec icône en haut + texte

Ajouter la classe tabs-icon-top après la classe tabs configurera des onglets avec icône en haut + texte.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="../index.html">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="../index.html">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Onglets avec icône à gauche + texte

Ajouter la classe tabs-icon-left après la classe tabs configurera des onglets avec icône à gauche + 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>

Onglets de style rayé

Vous pouvez ajouter tabs-striped à un élément avec la classe de style tabs pour obtenir des onglets de style Android. Vous pouvez également ajouter tabs-top pour placer les onglets en haut de la page.

Les couleurs des onglets rayés peuvent être contrôlées avec tabs-background-{color} et tabs-color-{color}. La valeur {color} peut être : default, light, stable, positive, calm, balanced, energized, assertive, royal, ou dark.

Remarque : Si vous souhaitez définir un titre d'en-tête sur les onglets, vous devez utiliser la classe has-tabs-top.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <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="../index.html">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="../index.html">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

L'effet d'exécution est le suivant :

Autres extensions