ionic tab bar action
May 22, 2021 ionic
Table of contents
ionic tab bar action
ion-tabs
ion-tabs is a tab bar that consists of a set of page tabs. You can switch pages by clicking on the options.
For iOS, it appears at the bottom of the screen and Android 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
| Property | Type | Details |
|---|---|---|
|
delegate-handle
(Optional)
|
字符串
|
The handle identifies
|
ion-tab
Belongs to ionTabs
Contains a tab content. This content exists only in a 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
| Property | Type | Details |
|---|---|---|
| title |
字符串
|
The title of the tab. |
|
Href
(Optional)
|
字符串
|
But when touched, the tab will jump the link. |
|
icon
(Optional)
|
字符串
|
The icon of the tab. Given a value, it becomes the default values for ion-on and ion-off. |
|
icon-on
(Optional)
|
字符串
|
The icon of the selected label. |
|
icon-off
(Optional)
|
字符串
|
The icon of the unselected label. |
|
badge
(Optional)
|
表达式
|
The badge (usually a number) on the tab. |
|
badge-style
(Optional)
|
表达式
|
The style of the micro-chapter on the tab (example, tabs-positive). |
|
on-select
(Optional)
|
表达式
|
Triggered when the tab is selected. |
|
on-deselect
(Optional)
|
表达式
|
triggered when the tab is unchecked. |
|
ng-click
(Optional)
|
表达式
|
Typically, the tab is selected when you click. I f ng-Click is set, it will not be selected. You can specify a switch label with $ionicTabsDelegate.select(). |
$ionicTabsDelegate
Authorize control of the ionTabs directive.
This method calls the $ionic Tabs Delegate service directly and controls all ionTabs instructions. Control specific ionTabs instances using the $getByHandle method.
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 a label to match a given index.
| Parameters | Type | Details |
|---|---|---|
| index |
数值
|
Select the index of the label. |
|
shouldChangeHistory
(Optional)
|
布尔值
|
This option should load the browsing history of this label, if one exists, and use it, or load only the default page. T
he default is false.
Tip: If an
|
selectedIndex()
Return value: Value, index of selected label, such as -1.
$getByHandle(handle)
| Parameters | Type | Details |
|---|---|---|
| handle |
字符串
|
For example:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);