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 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

<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>


The effect is as follows:

API

##delegate-handle
AttributeTypeDetails
(optional)
StringThis handler identifies the tabs with

$ionicTabsDelegate.

##ion-tab

Belongs to ionTabs

Contains a tab content. The content only exists in the given tab that is selected.

Each ionTab has its own browsing history.

Usage

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

API

PropertiestitleString The title of the tab. hrefStringBut when touched, the tab will jump to the link. iconStringThe icon of the tab. If a value is given, it becomes the default value for ion-on and ion-off. icon-onStringThe icon of the selected label. icon-offStringThe icon of the unselected label. badgeExpressionThe badge on the tab (usually a number). badge-styleExpressionThe style of the micro-chapter on the tab (for example, tabs-positive). on-selectExpressionFired when the tab is selected. on-deselectExpressionFires when the tab is unchecked. ng-clickExpressionNormally, 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

Authorization control ionTabs command.

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

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

Method

select(index, [shouldChangeHistory])

Select tags to match the given index.

TypeDetails

(optional)

(optional)

(optional)

(optional)

(optional)

(optional)

(optional)

(optional)

(optional)

ParametersTypeDetails
indexNumber

Select the index of the tag.

shouldChangeHistory
(optional)
Boolean value

Whether this option should load the browsing history for this tab (if it exists) and use it, or just load the default page. Default is false. Tip: If an ion-nav-view is in a tab, you may need to set this to true. 

selectedIndex()

Return value: Value, the index of the selected tag, such as -1. 

$getByHandle(handle)
##handle ##For example:
ParametersTypeDetails
String
$ionicTabsDelegate.$getByHandle('my-handle').select(0);

←