Ionic-js-tabs

Ionic-Javascriptタブ

タブは、ナビゲーションタイプやアプリ内のさまざまなページを選択する場合に便利なパターンです。 Androidデバイスの場合は画面の上部に、IOSデバイスの場合は下部に同じタブが表示されます。

タブを使用する

*ion-tabs* をコンテナ要素として、 *ion-tab* をコンテンツ要素として使用して、タブをアプリに追加できます。 これを *indexl* に追加しますが、アプリ内の任意のHTMLファイルに追加できます。 CSSの問題を回避するために、 *ion-content* 内に追加しないでください。

indexlコード

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing"
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home"
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star"
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

出力は次のスクリーンショットのようになります。

Ionic Javascript Tabs

*ion-tab* 要素に利用可能なAPIがあります。 *title* 、 *icon-on* 、および *icon-off* を使用した上記の例で示したように、属性として追加できます。 最後の2つは、選択したタブを他のタブと区別するために使用されます。 上の画像を見ると、最初のタブが選択されていることがわかります。 次の表の残りの属性を確認できます。

タブ属性

Attribute	Type	Details
title	string	The title of the tab.
href	string	The link used for tab navigation.
icon	string	The icon of the tab.
icon-on	string	The icon of the tab when selected.
icon-off	string	The icon of the tab when not selected.
badge	expression	The badge for the tab.
badge-style	expression	The badge style for the tab.
on-select	expression	Called when tab is selected
on-deselect	expression	Called when tab is deselected
hidden	expression	Used to hide the tab.
disabled	expression	Used to disable the tab.

また、タブには独自のデリゲートサービスがあり、アプリ内のすべてのタブを簡単に制御できます。 コントローラーに挿入でき、次の表に示すいくつかのメソッドがあります。

デリゲートメソッド

Method	Parameters	Type	Details
selectedIndex()	/	number	Returns the index of the selected tab.
$getByHandle(parameter1)	handle	string	Used to connect methods to the particular tab view with the same handle. Handle can be added to ion-tabs *by using delegate-handle = "my-handle" attribute. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();*