Ionic Tab-Leisten-Operationen
ion-tabs
ion-tabs ist eine Tab-Leiste, die aus einer Reihe von Seiten-Tabs besteht. Sie können die Seiten durch Klicken auf die Tabs wechseln.
Bei iOS erscheint sie am unteren Bildschirmrand; bei Android erscheint sie am oberen Bildschirmrand (unterhalb der Navigationsleiste).
Nutzung
Beispiel
Ausprobieren »
Der Effekt ist wie folgt:
API
| Attribute | Type | Details |
|---|---|---|
|
delegate-handle
(Optional)
|
string
|
Dieser Handle wird verwendet |
ion-tab
Gehört zu ionTabs
Enthält einen Tab-Inhalt. Dieser Inhalt existiert nur im ausgewählten angegebenen Tab.
Jeder ionTab hat seinen eigenen Browserverlauf.
Nutzung
<ion-tab title="Tab!" icon="my-icon" href="../index.html" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
API
| Attribute | Type | Details |
|---|---|---|
| title |
string
|
Der Titel des Tabs. |
|
href
(Optional)
|
string
|
Der Link, zu dem der Tab beim Berühren navigiert. |
|
icon
(Optional)
|
string
|
Das Symbol des Tabs. Wenn ein Wert angegeben wird, wird er zum Standard für ion-on und ion-off. |
|
icon-on
(Optional)
|
string
|
Das Icon des ausgewählten Tabs. |
|
icon-off
(Optional)
|
string
|
Das Icon des nicht ausgewählten Tabs. |
|
badge
(Optional)
|
expression
|
Das Badge auf dem Tab (normalerweise eine Zahl). |
|
badge-style
(Optional)
|
expression
|
Der Stil des Badges auf dem Tab (z. B. tabs-positive). |
|
on-select
(Optional)
|
expression
|
Wird ausgelöst, wenn der Tab ausgewählt wird. |
|
on-deselect
(Optional)
|
expression
|
Wird ausgelöst, wenn der Tab abgewählt wird. |
|
ng-click
(Optional)
|
expression
|
Normalerweise wird der Tab beim Anklicken ausgewählt. Wenn ng-click gesetzt ist, wird er nicht ausgewählt. Sie können $ionicTabsDelegate.select() verwenden, um den Tabwechsel festzulegen. |
$ionicTabsDelegate
Delegiert die Steuerung der ionTabs-Direktive.
Diese Methode ruft direkt den Dienst $ionicTabsDelegate auf, um alle ionTabs-Direktiven zu steuern. Verwenden Sie die Methode $getByHandle, um eine bestimmte ionTabs-Instanz zu steuern.
Nutzung
<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);
}
}
Methoden
select(index, [shouldChangeHistory])
Wählt den Tab aus, der dem angegebenen Index entspricht.
| Parameters | Type | Details |
|---|---|---|
| index |
numeric value
|
Der Index des auszuwählenden Tabs. |
|
shouldChangeHistory
(Optional)
|
boolean value
|
Gibt an, ob diese Option den Browserverlauf des Tabs (falls vorhanden) laden und verwenden oder nur die Standardseite laden soll. Standard ist false. Hinweis: Wenn ein |
selectedIndex()
Rückgabewert:Zahl, der Index des ausgewählten Tabs, z. B. -1.
$getByHandle(handle)
| Parameters | Type | Details |
|---|---|---|
| handle |
string
|
Beispiel:
$ionicTabsDelegate.$getByHandle('my-handle').select(0); Andere Erweiterungen