Latest web development tutorials

ionische Tableiste Betrieb

Ion-tabs

Ionen Tabs sind eine Reihe von Seite Registerkarten in der Tab-Leiste. Sie können die Seiten wechseln, indem Sie auf die Option klicken.

Für iOS, es am unteren Rand des Bildschirms angezeigt wird, Android wird am oberen Rand des Bildschirms (unterhalb der Navigationsleiste) erscheinen.

Verwendung 

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

Der Effekt ist wie folgt:

API

Immobilien Typ Detail
Delegat-Griff
(Optional)
字符串

Der Griff mit $ionicTabsDelegate diese Registerkarten zu identifizieren.

Ion-tab

Affiliated ionTabs

Es enthält eine Registerkarte Inhalt. Dieser Inhalt ist nur in einem bestimmten ausgewählten Registerkarte.

Jeder hat seine eigene ionTab Browser-Verlauf.

Verwendung 

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

API

Immobilien Typ Detail
Titel 字符串

Tab-Titel.

href
(Optional)
字符串

Aber wenn Sie berühren die Registerkarte Links zu springen.

Symbol
(Optional)
字符串

Tab-Symbol. Wenn ein gegebener Wert, wird es die Standard-Ion-on und Ion-off.

Symbol-on
(Optional)
字符串

Ausgewählte Tag-Symbol.

Symbol-off
(Optional)
字符串

Nicht Tag-Symbol ausgewählt.

Abzeichen
(Optional)
表达式

Abzeichen Reiter (in der Regel eine Zahl).

Abzeichen-Stil
(Optional)
表达式

Registerkarte Stile Micro-Cap (zB Tabs-positiv).

on-select
(Optional)
表达式

Wird ausgelöst, wenn die ausgewählte Registerkarte.

on-Abwahl
(Optional)
表达式

Auslösen, wenn nicht aktiviert Tab.

ng-Klick
(Optional)
表达式

Typischerweise wird, wenn darauf geklickt Reiter ausgewählt werden. Wenn die ng-Click, wird es nicht ausgewählt werden. Sie können $ ionicTabsDelegate.select () verwenden, um den Schalter Etikett angeben.

$ IonicTabsDelegate

Berechtigungskontrolle ionTabs Anweisung.

Diese Methode direkt $ ionicTabsDelegate Dienst anrufen, kontrollieren Sie alle ionTabs Anweisung. Mit $ getByHandle Verfahren zur Bekämpfung von spezifischen ionTabs Instanz.

Verwendung 

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

Weg 

select(index, [shouldChangeHistory])

Wählen Sie die Registerkarte den gegebenen Index entsprechen.

Parameter Typ Detail
Index 数值

Wählen Sie die Registerkarte Index.

shouldChangeHistory
(Optional)
布尔值

Wenn diese Option sollte den Browser-Verlauf dieses Tags (falls vorhanden) zu laden, und die Verwendung oder Last nur die Standardseite. Der Standardwert ist false. Tipp: Wenn ein ion-nav-view in der Optionskarte, können Sie es auf true setzen müssen. 

selectedIndex()

Rückgabewert: Der Wert wird Tag - Index ausgewählt, wie -1.

$getByHandle(handle)
Parameter Typ Detail
Griff 字符串

Zum Beispiel: 

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