ionic tab（タブ）

ionic tab（タブ）は、水平に並んだボタンまたはリンクで、ページ間のナビゲーション切り替えに使用します。テキストとアイコンの組み合わせを含めることができ、モバイルデバイスで人気のあるナビゲーション方法です。

以下のタブコンテナは tabs クラスを使用し、各タブは tab-item クラスを使用します。デフォルトでは、タブはテキストのみで、アイコンはありません。

実例

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

デフォルトでは、タブの色はデフォルトです。以下の異なる色スタイルを設定できます：tabs-default、tabs-light、tabs-stable、tabs-positive、tabs-calm、tabs-balanced、tabs-energized、tabs-assertive、tabs-royal、tabs-dark。

タブバーを非表示にするには、tabs-item-hide クラスを使用します。

アイコンタブ

tabs クラスの後に tabs-icon-only クラスを追加すると、アイコンのみ表示するタブを設定できます。

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

上部アイコン+テキストタブ

tabs クラスの後に tabs-icon-top クラスを追加すると、上部アイコン+テキストタブを設定できます。

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

左側アイコン+テキストタブ

tabs クラスの後に tabs-icon-left クラスを追加すると、左側アイコン+テキストタブを設定できます。

<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 というスタイル名を持つ要素に tabs-striped を追加すると、Android スタイルのようなタブを実装できます。また、tabs-top を追加すると、タブをページの上部に配置できます。

ストライプタブの色は、tabs-background-{color} と tabs-color-{color} で制御できます。{color} の値は、default、light、stable、positive、calm、balanced、energized、assertive、royal、または dark です。

注意：タブ上にヘッダータイトルを設定する場合は、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>

実行結果は次のとおりです：