イオンタブバーの操作



ion-tabs

ion-tabs は、ページ タブのセットで構成されるタブ バーです。オプションをクリックするとページを切り替えることができます。

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

属性タイプ詳細
デリゲートハンドル
(オプション)
<コード>String字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。


ion-tab

隶属于ionTabs

包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。

每个ionTab都有自己的浏览历史。

用法

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

API

属性类型详情
title字符串

选项卡的标题。

href
(可选)
字符串

但触碰的时候,该选项卡将会跳转的的链接。

icon
(可选)
字符串

选项卡的图标。如果给定值,它将成为ion-on和ion-off的默认值。

icon-on
(可选)
字符串

被选中标签的图标。

icon-off
(可选)
字符串

没被选中标签的图标。

badge
(可选)
表达式

选项卡上的徽章(通常是一个数字)。

badge-style
(可选)
表达式

选项卡上微章的样式(例,tabs-positive )。

on-select
(可选)
表达式

选项卡被选中时触发。

on-deselect
(可选)
表达式

选项卡取消选中时触发。

ng-click
(可选)
表达式このハンドルは、$ionicTabsDelegate を使用してこれらのタブを識別します。

🎜ion-tab🎜🎜はionTabsに属します🎜🎜にはタブコンテンツが含まれています。コンテンツは、選択されている特定のタブにのみ存在します。 🎜🎜各 ionTab には独自の閲覧履歴があります。 🎜🎜使用法🎜
<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>
🎜API🎜🎜🎜🎜🎜プロパティ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜title🎜🎜String🎜🎜🎜タブのタイトル。 🎜🎜🎜🎜🎜href🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜ただし、タブをタッチするとリンクにジャンプします。 🎜🎜🎜🎜🎜icon🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜タブのアイコン。値が指定されている場合、それが ion-on および ion-off のデフォルト値になります。 🎜🎜🎜🎜🎜icon-on🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜 選択したラベルのアイコン。 🎜🎜🎜🎜🎜icon-off🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜 選択されていないラベルのアイコン。タブ上のバッジ (通常は数字)。 🎜🎜🎜🎜🎜badge-style🎜🎜(オプション)🎜🎜🎜🎜expression🎜🎜🎜 タブ上のマイクロバッジのスタイル (タブポジティブなど)。 🎜🎜🎜🎜🎜on-select🎜🎜(オプション)🎜🎜🎜🎜expression🎜🎜🎜タブが選択されたときに起動されます。 🎜🎜🎜🎜🎜on-deselect🎜🎜(オプション)🎜🎜🎜🎜expression🎜🎜🎜タブの選択が解除されたときに発生します。 🎜🎜🎜🎜🎜ng-click🎜🎜(オプション)🎜🎜🎜🎜expression🎜🎜🎜 通常、クリックするとタブが選択されます。 ng-Clickが設定されている場合は選択されません。 $ionicTabsDelegate.select() を使用してタブの切り替えを指定できます。 🎜🎜🎜🎜🎜

$ionicTabsDelegate

ionTabs コマンドを制御する権限を与えます。

このメソッドは、$ionicTabsDelegate サービスを直接呼び出して、すべての ionTabs 命令を制御します。 $getByHandle メソッドを使用して、特定の ionTabs インスタンスを制御します。

使用法

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

方法

selectedIndex()

指定されたインデックスに一致するタグを選択します。

パラメータタイプ詳細
indexValue数值

选择标签的索引。

shouldChangeHistory
(可选)
布尔值

此选项是否应该加载这个标签的浏览历史(如果存在),并使用,或仅加载默认页面。默认为false。提示:如果一个ion-nav-view在选项卡里,你可能需要设置它为true。

$getByHandle(handle)

返回值: 数值, 被选中标签的索引,如 -1。

$ionicTabsDelegate.$getByHandle('my-handle').select(0);
参数类型详情
handle字符串 タグのインデックスを選択します。
shouldChangeHistory
(オプション)

boolean🎜🎜🎜このオプションがこのタブの閲覧履歴をロードするかどうか (存在する場合)、デフォルトのページを使用するか、単にロードします。デフォルトは false です。ヒント: ion-nav-view がタブ内にある場合は、これを true に設定する必要がある場合があります。 🎜🎜🎜🎜🎜rrreee🎜戻り値: 値、選択したタグのインデックス (-1 など)。 🎜rrreee🎜🎜🎜parameter🎜🎜type🎜🎜詳細🎜🎜🎜🎜🎜🎜handle🎜🎜string🎜🎜🎜🎜 🎜 🎜🎜🎜例:🎜rrreee🎜