イオン-タブ

Ionicタブ*は、ほとんどの場合モバイルナビゲーションに使用されます。スタイリングは、さまざまなプラットフォームに最適化されています。これは、Androidデバイスではタブが画面の上部に配置され、IOSではタブが下部に配置されることを意味します。タブを作成するにはさまざまな方法があります。この章では、タブの作成方法について詳しく説明します。

シンプルなタブ

*tabs* クラスを使用して、単純なタブメニューを作成できます。 このクラスを使用している内部要素には、 *tab-item* 要素を追加する必要があります。 通常、タブはナビゲーションに使用されるため、タブ項目には *<a>* タグを使用します。 次の例は、4つのタブを持つメニューを示しています。

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>

   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

上記のコードは、次の画面を生成します-

イオンタブ

アイコンを追加する

Ionicは、タブにアイコンを追加するクラスを提供します。タブにテキストのないアイコンが必要な場合は、 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-planet"></i>
   </a>
</div>

上記のコードは、次の画面を生成します-

イオンタブアイコン

アイコンとテキストを一緒に追加することもできます。 tabs-icon-top および tabs-icon-left は、それぞれアイコンの上または左側にアイコンを配置するクラスです。実装は上記の例と同じです。使用する新しいクラスとテキストを追加するだけです。次の例は、テキストの上に配置されたアイコンを示しています。

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>

   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>

   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

上記のコードは、次の画面を生成します-

Ionic Tab Icon Top

ストライプタブ

ストライプタブは、 tabs-striped クラスを使用してタブの周りにコンテナを追加することで作成できます。このクラスでは、タブメニューにいくつかのイオン色を追加するために、 tabs-background および tabs-color プレフィックスを使用できます。

次の例では、 tabs-background-positive （青）クラスを使用してメニューの背景のスタイルを設定し、 tabs-color-light （白）クラスを使用してタブアイコンのスタイルを設定します。アクティブな2番目のタブとそうでない他の2つのタブの違いに注意してください。

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>

      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>

      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンタブストリップ

Ionic-tabs

イオン-タブ

シンプルなタブ

アイコンを追加する

ストライプタブ

目次