opérations de la barre d'onglets ionique


ion-tabs

ion-tabs est une barre d'onglets composée d'un ensemble d'onglets de page. Vous pouvez changer de page en cliquant sur les options.

Pour iOS, il apparaîtra en bas de l'écran, et sur Android, il apparaîtra en haut de l'écran (sous la barre de navigation).

Utilisation

<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

< tr class="firstRow">
AttributsTypeDétails
délégué - handle
(facultatif)
String
属性类型详情
delegate-handle
(可选)
字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。

Le handle utilise $ionicTabsDelegate pour identifier ces onglets.

ion-tab

Appartient à ionTabs

Contient le contenu d'un onglet. Le contenu n'existe que dans l'onglet donné sélectionné.

Chaque ionTab possède son propre historique de navigation.

Utilisation

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

API
属性类型详情
title字符串

选项卡的标题。

href
(可选)
字符串

但触碰的时候，该选项卡将会跳转的的链接。

icon
(可选)
字符串

选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。

icon-on
(可选)
字符串

被选中标签的图标。

icon-off
(可选)
字符串

没被选中标签的图标。

badge
(可选)
表达式

选项卡上的徽章（通常是一个数字）。

badge-style
(可选)
表达式

选项卡上微章的样式（例，tabs-positive ）。

on-select
(可选)
表达式

选项卡被选中时触发。

on-deselect
(可选)
表达式

选项卡取消选中时触发。

ng-click
(可选)
表达式

通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。

< td ><🎜>Le titre de l'onglet. <🎜>
AttributsType< /th>Détails
titreChaîne
href
(facultatif)
Chaîne <🎜>Mais lorsque vous le touchez, l'onglet passe au lien. <🎜>
icône
(facultatif)
Chaîne <🎜>L'icône de l'onglet. Si une valeur est donnée, elle devient la valeur par défaut pour les ions activés et désactivés. <🎜>
icône activée
(facultatif)
Chaîne <🎜>L'icône de la balise sélectionnée. <🎜>
icône désactivée
(facultatif)
Chaîne <🎜>L'icône de la balise non sélectionnée. <🎜>
badge
(facultatif)
expression <🎜>Le badge sur l'onglet (généralement un numéro). <🎜>
style de badge
(facultatif)
expression <🎜>Le style du micro chapitre sur l'onglet (par exemple, tabs-positif). <🎜>
sur sélection
(facultatif)
expression <🎜>Déclenché lorsque l'onglet est sélectionné. <🎜>
on-deselect
(facultatif)
expression <🎜>Se déclenche lorsque l'onglet n'est pas coché. <🎜>
ng-clic
(facultatif)
Expression <🎜>Normalement, l'onglet sera sélectionné lorsque vous cliquerez dessus. Si ng-Click est défini, il ne sera pas sélectionné. Vous pouvez utiliser $ionicTabsDelegate.select() pour spécifier les onglets de commutation. <🎜>

$ionicTabsDelegate

Autorise la commande ionTabs.

Cette méthode appelle directement le service $ionicTabsDelegate pour contrôler toutes les instructions ionTabs. Utilisez la méthode $getByHandle pour contrôler des instances ionTabs spécifiques.

Utilisation

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

Méthode

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

Sélectionnez les balises correspondant à l'index donné.

ParamètreTypeDétails
indexValeur
参数类型详情
index数值

选择标签的索引。

shouldChangeHistory
(可选)
布尔值

此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个ion-nav-view在选项卡里，你可能需要设置它为true。

Sélectionnez l'index de la balise.

shouldChangeHistory
(facultatif)
Valeur booléenne Cette option indique si l'historique de navigation de cet onglet (le cas échéant) doit être chargé et utilisé, ou si seule la page par défaut doit être chargée. La valeur par défaut est fausse. Astuce : Si une ion-nav-view se trouve dans un onglet, vous devrez peut-être la définir sur true. 

select(index, [shouldChangeHistory])
参数类型详情
handle字符串

Valeur de retour :

Numéro, l'index de la balise sélectionnée, telle que -1. 
selectedIndex()
<🎜><🎜> Par exemple : <🎜>
$getByHandle(handle)
<🎜>