イオン性タブ（タブ）

イオン性タブ（タブ）が水平方向に切り替えるページ間を移動するためのボタンやリンクを整列されます。 これは、モバイルデバイス上のテキストとアイコンの組み合わせは、ナビゲーションの一般的な方法で含めることができます。

次のタブタブコンテナクラス、タブ・アイテム・クラスを使用して、各タブを使用します。 デフォルトでは、タブは、テキストおよびアイコンなしです。

例

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

»をお試しください

タブ - デフォルトでは、タブ・光、タブ、安定した、タブ陽性、タブ、穏やかな、タブ、バランスのとれた、タブ通電、タブ-断定、タブ：デフォルトでは、タブの色は、デフォルトでは、次の異なる色のスタイルを設定することができます-Royal、タブ、暗いです。

タブバーを非表示にするには、タブ項目非表示クラスを使用することができます。

[アイコン]タブ

クラスはタブタブアイコンのみを追加した後のクラスは、アイコンのみ]タブを表示するように設定することができます。

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

»をお試しください

トップアイコン+テキスト]タブ

タブタブアイコントップクラスアイコン+テキストを追加するためのクラスでは、タブの上部に設定することができた後。

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

»をお試しください

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

クラスの左側にあるクラス後のタブを追加するには、タブアイコン、左のアイコンは、+テキスト]タブに設定することができます。

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

»をお試しください

ストライプスタイル]タブ

あなたは、Androidのスタイルタブを達成するには、タブで要素名のタブストライプパターンを追加することができます。 また、ページの上部にあるタブを達成するために、タブトップを追加することができます。

ストライプスタブの色は、タブ - 背景 - {カラー}とタブ - 色 - {色}によって制御することができ、{カラー}の値にすることができますデフォルトでは、光、安定した、正の、穏やかな、バランスのとれた、通電、断定、王室、または暗いです。

注：タブのタイトルの頭は再び、あなたが持っている-タブトップクラスを使用する必要がある場合。

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

»をお試しください

次のように業績は次のとおりです。