opération de barre d'onglet ionique
ion-onglets
ion-onglets sont un ensemble de pages onglets dans la barre d'onglets. Vous pouvez changer de page en cliquant sur l'option.
Pour iOS, il apparaîtra au bas de l'écran, Android apparaîtra en haut de l'écran (en dessous de la barre de navigation).
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>
L'effet est le suivant:
API
| propriété | type | détail |
|---|---|---|
| délégué poignée (Facultatif) | 字符串 | La poignée avec |
ion-onglet
Affiliated ionTabs
Il contient une teneur en onglet. Ce contenu existe seulement dans un onglet sélectionné donné.
Chacun a son propre historique de navigation ionTab.
usage
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
API
| propriété | type | détail |
|---|---|---|
| titre | 字符串 | Titre de l'onglet. |
| href (Facultatif) | 字符串 | Mais lorsque vous touchez l'onglet sautera liens. |
| icône (Facultatif) | 字符串 | Tab icône. Si une valeur donnée, il devient l'ion sur défaut et d'ions hors de. |
| icon-on (Facultatif) | 字符串 | Sélectionné icône de tag. |
| icon-off (Facultatif) | 字符串 | Non sélectionné tag icône. |
| badge (Facultatif) | 表达式 | onglet Badge (généralement un numéro). |
| insigne de style (Facultatif) | 表达式 | onglet Styles Micro-Cap (par exemple, les onglets-positifs). |
| sur-select (Facultatif) | 表达式 | Se déclenche lorsque l'onglet sélectionné. |
| sur-deselect (Facultatif) | 表达式 | Déclencher onglet Lorsqu'elle est désactivée. |
| ng-clic (Facultatif) | 表达式 | En règle générale, lorsque vous cliquez dessus onglet sera sélectionné. Si le ng-Click, il ne sera pas sélectionné. Vous pouvez utiliser $ ionicTabsDelegate.select () pour spécifier l'étiquette de l'interrupteur. |
$ IonicTabsDelegate
Autorisation ionTabs de contrôle instruction.
Cette méthode appeler directement le service $ ionicTabsDelegate, contrôler toutes les instructions ionTabs. Avec la méthode $ getByHandle de contrôle instance ionTabs spécifique.
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);
}
}
manière
select(index, [shouldChangeHistory])
Sélectionnez l'onglet pour correspondre à l'index donné.
| Paramètres | type | détail |
|---|---|---|
| index | 数值 | Sélectionnez l'onglet d'index. |
| shouldChangeHistory (Facultatif) | 布尔值 | Si cette option devrait charger l'historique de navigation de cette balise (le cas échéant), et l'utilisation, ou la charge que la page par défaut. La valeur par défaut est faux. Astuce: Si un |
selectedIndex()
Valeur de retour:La valeur est sélectionnée indice de tag, comme -1.
$getByHandle(handle)
| Paramètres | type | détail |
|---|---|---|
| poignée | 字符串 |
Par exemple:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);