YouTipIonic Ion Tabs
* * *
## ion-tabs
ion-tabs is a tab bar composed of a set of page tabs. You can switch pages by clicking on the options.
For iOS, it will appear at the bottom of the screen, and for Android, it will appear at the top of the screen (below the navigation bar).
### Usage
## Example
[Try it »](#)
The effect is shown as follows:
### API
| Attribute | Type | Details |
| --- | --- | --- |
| delegate-handle _(optional)_ | `string` | The handle used to identify these tabs with [`$ionicTabsDelegate`](#). |
* * *
## ion-tab
Child of ionTabs
Contains a tab content. This content only exists in the given tab when it is selected.
Each ionTab has its own browsing history.
### Usage
### API
| Attribute | Type | Details |
| --- | --- | --- |
| title | `string` | The title of the tab. |
| href _(optional)_ | `string` | The link that the tab will navigate to when tapped. |
| icon _(optional)_ | `string` | The icon of the tab. If given, it will become the default value for ion-on and ion-off. |
| icon-on _(optional)_ | `string` | The icon of the selected tab. |
| icon-off _(optional)_ | `string` | The icon of the unselected tab. |
| badge _(optional)_ | `expression` | The badge on the tab (usually a number). |
| badge-style _(optional)_ | `expression` | The style of the badge on the tab (e.g., tabs-positive). |
| on-select _(optional)_ | `expression` | Triggered when the tab is selected. |
| on-deselect _(optional)_ | `expression` | Triggered when the tab is deselected. |
| ng-click _(optional)_ | `expression` | Typically, a tab is selected when clicked. If ng-click is set, it will not be selected. You can use $ionicTabsDelegate.select() to specify the tab switch. |
* * *
## $ionicTabsDelegate
Authorized control for the ionTabs directive.
This method directly calls the $ionicTabsDelegate service to control all ionTabs directives. Use the $getByHandle method to control a specific ionTabs instance.
### Usage
Hello, Tab 1! Hello Tab 2! function MyCtrl($scope, $ionicTabsDelegate) { $scope.selectTabWithIndex = function(index) { $ionicTabsDelegate.select(index); }}
### Methods
select(index, )
Select the tab matching the given index.
| Parameter | Type | Details |
| --- | --- | --- |
| index | `number` | The index of the selected tab. |
| shouldChangeHistory _(optional)_ | `boolean` | Whether this option should load this tab's browsing history (if it exists) and use it, or only load the default page. Defaults to false. Tip: If an `ion-nav-view` is inside the tab, you might need to set this to true. |
selectedIndex()
**Returns:** number, the index of the selected tab, e.g., -1.
$getByHandle(handle)
| Parameter | Type | Details |
| --- | --- | --- |
| handle | `string` | |
For example:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);