Latest web development tutorials

イオンタブバー操作

イオンタブ

イオンタブはタブバーのページタブのセットです。 あなたは、オプションをクリックしてページを切り替えることができます。

iOSのためには、画面の下部に表示され、Androidは（ナビゲーションバーの下）画面の上部に表示されます。

使用法 

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

  <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>

次のような効果があります

API

プロパティ タイプ 詳細
デリゲートハンドル
（オプション）
字符串

ハンドル$ionicTabsDelegateこれらのタブを識別するため。

イオンタブ

提携ionTabs

これは、タブのコンテンツが含まれています。 このコンテンツは、所定の選択したタブに存在します。

それぞれが独自のionTabの閲覧履歴があります。

使用法 

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

API

プロパティ タイプ 詳細
タイトル 字符串

タブのタイトル。

HREF
（オプション）
字符串

しかし、あなたが触れたときに、タブ、リンクをジャンプします。

アイコン
（オプション）
字符串

タブアイコン。 指定された値と、デフォルトのイオンオンおよびイオンオフになります。

アイコン上
（オプション）
字符串

選択したタグアイコン。

アイコンオフ
（オプション）
字符串

タグアイコンを選択していません。

バッジ
（オプション）
表达式

バッジタブ（通常は数）。

バッジスタイル
（オプション）
表达式

[スタイル]タブマイクロキャップ（例えば、タブ陽性）。

オンを選択
（オプション）
表达式

火災時に選択したタブ。

オンディセレクト
（オプション）
表达式

未チェックのタブをトリガします。

NG-クリック
（オプション）
表达式

一般的に、クリックされたタブが選択されます。 NG-クリックした場合、それは選択されません。 あなたは、スイッチのラベル​​を指定する$ ionicTabsDelegate.select（）を使用することができます。

$ IonicTabsDelegate

認可制御ionTabs命令。

この方法は、直接、$ ionicTabsDelegateサービスを呼び出すすべてのionTabs命令を制御します。 特定ionTabsインスタンスを制御する$ getByHandle方法では。

使用法 

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      你好，标签1！
      <button ng-click="selectTabWithIndex(1)">选择标签2</button>
    </ion-tab>
    <ion-tab title="Tab 2">你好标签2！</ion-tab>

  </ion-tabs>
</body>

function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

ウェイ 

select(index, [shouldChangeHistory])

指定されたインデックスと一致するように、タブを選択します。

パラメータ タイプ 詳細
インデックス 数值

インデックスタブを選択します。

shouldChangeHistory
（オプション）
布尔值

このオプションは、このタグ（存在する場合）の閲覧履歴、および使用した場合にロード、または、デフォルトのページをロードする必要があります。 デフォルトはfalseです。 ヒント：場合はion-nav-viewオプションカードで、あなたはこれをtrueに設定する必要があるかもしれません。 

selectedIndex()

戻り値：値は、-1のように、タグインデックスを選択されています。

$getByHandle(handle)
パラメータ タイプ 詳細
ハンドル 字符串

例えば： 

$ionicTabsDelegate.$getByHandle('my-handle').select(0);