Latest web development tutorials

ionic tab bar operation

ion-tabs

ion-tabs are a set of page tabs in the tab bar. You can switch pages by clicking on the option.

For iOS, it will appear at the bottom of the screen, Android 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

Attributes Types of Detail
delegate-handle
(Optional)
字符串

The handle with $ionicTabsDelegate to identify these tabs.

ion-tab

Affiliated ionTabs

It contains a tab content. This content only exists in a given selected tab.

Each has its own ionTab browsing history.

usage 

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

API

Attributes Types of Detail
title 字符串

Tab title.

href
(Optional)
字符串

But when you touch the tab will jump links.

icon
(Optional)
字符串

Tab icon. If a given value, it becomes the default ion-on and ion-off of.

icon-on
(Optional)
字符串

Selected tag icon.

icon-off
(Optional)
字符串

Not selected tag icon.

badge
(Optional)
表达式

Badge tab (usually a number).

badge-style
(Optional)
表达式

Styles tab Micro-Cap (for example, tabs-positive).

on-select
(Optional)
表达式

Fires when the selected tab.

on-deselect
(Optional)
表达式

Trigger When unchecked tab.

ng-click
(Optional)
表达式

Typically, when clicked tab will be selected. If the ng-Click, it will not be selected. You can use $ ionicTabsDelegate.select () to specify the switch label.

$ IonicTabsDelegate

Authorization control ionTabs instruction.

This method directly call $ ionicTabsDelegate service, control all ionTabs instruction. With $ getByHandle method of controlling 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);
  }
}

method 

select(index, [shouldChangeHistory])

Select the tab to match the given index.

parameter Types of Detail
index 数值

Select the index tab.

shouldChangeHistory
(Optional)
布尔值

If this option should load the browsing history of this tag (if present), and the use, or load only the default page. The default is false. Tip: If a ion-nav-view in the option card, you may need to set it to true. 

selectedIndex()

Return Value: Value is selected tag index, such as -1.

$getByHandle(handle)
parameter Types of Detail
handle 字符串

E.g: 

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