イオンタブバーの操作
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字符串 | 该句柄用 |
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 を使用してこれらのタブを識別します。 |
<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()
指定されたインデックスに一致するタグを選択します。
| パラメータ | タイプ | 詳細 |
|---|---|---|
| index | Value数值 | 选择标签的索引。 |
| shouldChangeHistory (可选) | 布尔值 | 此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个 |
$getByHandle(handle)
返回值: 数值, 被选中标签的索引，如 -1。
$ionicTabsDelegate.$getByHandle('my-handle').select(0);| 参数 | 类型 | 详情 |
|---|---|---|
| handle | 字符串 | タグのインデックスを選択します。 |
(オプション)
boolean🎜🎜🎜このオプションがこのタブの閲覧履歴をロードするかどうか (存在する場合)、デフォルトのページを使用するか、単にロードします。デフォルトは false です。ヒント: ion-nav-view がタブ内にある場合は、これを true に設定する必要がある場合があります。 🎜🎜🎜🎜🎜rrreee🎜戻り値: 値、選択したタグのインデックス (-1 など)。 🎜rrreee
