Ionic Tabs Bar Operation

ion-tabs

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

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

Usage

Example

&lt;ion-tabs class="tabs-positive tabs-icon-only">

  &lt;ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  &lt;ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  &lt;ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>
</ion-tabs>

The effect is as shown below:

API

Attribute	Type	Details
delegate-handle (optional)	String	The handle used by $ionicTabsDelegate to identify these tabs.

ion-tab

Belongs to ionTabs

Contains a tab content. The content is only present in the given tab when selected.

Each ionTab has its own browsing history.

Usage

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

API

Attribute	Type	Details
title	String	The title of the tab.
href (optional)	String	The link the tab will navigate to when tapped.
icon (optional)	String	The icon of the tab. If given, it will be the default for icon-on and icon-off.
icon-on (optional)	String	The icon of the tab when selected.
icon-off (optional)	String	The icon of the tab when not selected.
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	Fired when the tab is selected.
on-deselect (optional)	Expression	Fired when the tab is deselected.
ng-click (optional)	Expression	Normally, tapping a tab will select it. If ng-click is set, it will not select it. You can use $ionicTabsDelegate.select() to select a tab.

$ionicTabsDelegate

Authorizes control of the ionTabs directive.

This method directly calls the $ionicTabsDelegate service to control all ionTabs directives. Use the $getByHandle method to control specific ionTabs instances.

Usage

<body ng-controller="MyCtrl">
  <ion-tabs>

    &lt;ion-tab title="Tab 1">
      Hello, Tab 1!
      <button ng-click="selectTabWithIndex(1)">Select Tab 2</button>
    </ion-tab>
    &lt;ion-tab title="Tab 2">Hello Tab 2!</ion-tab>

  </ion-tabs>
</body>

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

Methods

select(index, [shouldChangeHistory])

Select the tab to match the given index.

Parameter	Type	Details
index	Number	The index of the tab to select.

shouldChangeHistory (optional) | Boolean | Whether this option should load the browsing history of this tab (if it exists) and use it, or just load the default page. Defaults to false. Tip: If an ion-nav-view is inside a tab, you might need to set it to true.

selectedIndex()


**Returns:** Number, the index of the selected tab, such as -1.

$getByHandle(handle)


| Parameter | Type | Details |
| --- | --- | --- |
| handle | String |  |

Example:

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

❮ Ionic Gesture Event Ionic Creat App ❯