# ionic 選項卡欄操作
## 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
`delegate-handle(可選)`:`字符串`
該句柄用[`$ionicTabsDelegate`](/docs/api/service/$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(可選)`:`表達式`
通常,點擊時選項卡會被選中。如果設置了 ng-Click,它將不會被選中。 你可以用$ionicTabsDelegate.select()來指定切換標簽。
## $ionicTabsDelegate
授權控制ionTabs指令。
該方法直接調用$ionicTabsDelegate服務,控制所有ionTabs指令。用$getByHandle方法控制具體的ionTabs實例。
### 用法
```
<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])
```
選擇標簽來匹配給定的索引。
`index`:`數值`
選擇標簽的索引。
`shouldChangeHistory(可選)`:`布爾值`
此選項是否應該加載這個標簽的瀏覽歷史(如果存在),并使用,或僅加載默認頁面。默認為false。提示:如果一個`ion-nav-view`在選項卡里,你可能需要設置它為true。
```
selectedIndex()
```
**返回值:** 數值, 被選中標簽的索引,如 -1。
```
$getByHandle(handle)
```
`handle`:`字符串`
例如:
```
$ionicTabsDelegate.$getByHandle('my-handle').select(0);
```
****
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作