イオン-タブ

Ionic tabsほとんどの場合、モバイルナビゲーションに使用されます。スタイリングは、さまざまなプラットフォーム向けに最適化されています。これは、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-icon-only クラスは、の後に追加する必要があります tabsクラス。もちろん、表示したいアイコンを追加する必要があります。

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

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

縞模様のタブ

ストライプタブは、タブの周りにコンテナを追加することで作成できます。 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>

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