ionic Tab Bar Operations

ion-tabs

ion-tabs is a tab bar composed of a set of page tabs. You can switch pages by clicking the tabs.

For iOS, it appears at the bottom of the screen; for Android, it appears at the top of the screen (below the navigation bar).

Usage

Example

<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">  </ion-tab> <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">  </ion-tab> <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">  </ion-tab> </ion-tabs>

Try it »

The effect is as follows:

API

Attributes	Type	Details
delegate-handle (Optional)	`string`	This handle is used`$ionicTabsDelegate`to identify these tabs.

ion-tab

Belongs to ionTabs

Contains a tab content. This content only exists in the selected given tab.

Each ionTab has its own browsing history.

Usage

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

API

Attributes	Type	Details
title	`string`	The title of the tab.
href (Optional)	`string`	The link that the tab will navigate to when touched.
icon (Optional)	`string`	The icon of the tab. If a value is given, it becomes the default 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`	Normally, the tab will be selected when clicked. If ng-click is set, it will not be selected. You can use $ionicTabsDelegate.select() to specify switching tabs.

$ionicTabsDelegate

Delegates control of 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

<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);
  }
}

Methods

select(index, [shouldChangeHistory])

Select the tab matching the given index.

Parameters	Type	Details
index	`numeric value`	The index of the tab to select.
shouldChangeHistory (Optional)	`boolean value`	Whether this option should load the tab's browsing history (if it exists) and use it, or only load the default page. Default is false. Note: If a`ion-nav-view`is in the tab, you may need to set it to true.

selectedIndex()

Return value:Number, the index of the selected tab, e.g., -1.

$getByHandle(handle)

Parameters	Type	Details
handle	`string`

Example:

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

Other Extensions