Ionic Tab

Ionic Tabs sind horizontal angeordnete Buttons oder Links, die zum Wechseln zwischen Seiten verwendet werden. Sie können eine Kombination aus Text und Icons enthalten und sind eine beliebte Navigationsmethode auf mobilen Geräten.

Der Tab-Container unten verwendet die Klasse tabs, und jeder Tab verwendet die Klasse tab-item. Standardmäßig bestehen Tabs nur aus Text und haben keine Icons.

Beispiele

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

Standardmäßig ist die Tab-Farbe die Standardfarbe. Sie können die folgenden verschiedenen Farbstile festlegen: tabs-default, tabs-light, tabs-stable, tabs-positive, tabs-calm, tabs-balanced, tabs-energized, tabs-assertive, tabs-royal, tabs-dark.

Um die Tab-Leiste auszublenden, können Sie die Klasse tabs-item-hide verwenden.

Icon-Tabs

Das Hinzufügen der Klasse tabs-icon-only nach der Klasse tabs legt fest, dass Tabs nur Symbole anzeigen.

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

Symbol oben + Text-Tabs

Das Hinzufügen der Klasse tabs-icon-top nach der Klasse tabs legt Tabs mit Symbol oben + Text fest.

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

Symbol links + Text-Tabs

Das Hinzufügen der Klasse tabs-icon-left nach der Klasse tabs legt Tabs mit Symbol links + Text fest.

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

Tabs im gestreiften Stil

Sie können tabs-striped zu einem Element mit der Stilklasse tabs hinzufügen, um Tabs im Android-Stil zu erhalten. Sie können auch tabs-top hinzufügen, um die Tabs oben auf der Seite zu platzieren.

Die Farben gestreifter Tabs können mit tabs-background-{color} und tabs-color-{color} gesteuert werden. Der Wert für {color} kann sein: default, light, stable, positive, calm, balanced, energized, assertive, royal oder dark.

Hinweis: Wenn Sie einen Header-Titel auf den Tabs festlegen möchten, müssen Sie die Klasse has-tabs-top verwenden.

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

Das Ergebnis sieht wie folgt aus:

Andere Erweiterungen

ionic CSS

Ionic JavaScript