Najlepszy samouczek Zakładka jonowe Operacja Pasek W 2024 r. W tym samouczku możesz dowiedzieć się jon-tabs,jon-tab,$ IonicTabsDelegate,
jon-tabs to zestaw kart strony w pasku kart. Można przełączać strony klikając na opcję.
Dla iOS, pojawi się na dole ekranu, Android pojawi się na górze ekranu (poniżej paska nawigacyjnego).
<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>
Efekt jest następujący:
nieruchomość | typ | detal |
---|---|---|
Delegat rękojeść (Opcjonalnie) | 字符串 | Uchwyt z |
powiązanymi ionTabs
Zawiera zawartości karty. Ta treść istnieje tylko w danej wybranej zakładki.
Każdy ma swój własny ionTab historię przeglądania.
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
nieruchomość | typ | detal |
---|---|---|
tytuł | 字符串 | Tytuł Tab. |
href (Opcjonalnie) | 字符串 | Ale po dotknięciu karta będzie skok linki. |
ikona (Opcjonalnie) | 字符串 | Ikona Tab. Jeżeli danej wartości, staje się domyślnym jonów na jony i off. |
Ikona na (Opcjonalnie) | 字符串 | Wybrana ikona znacznika. |
icon-off (Opcjonalnie) | 字符串 | Nie wybrano ikonę znacznika. |
odznaka (Opcjonalnie) | 表达式 | Zakładka Badge (zwykle liczba). |
odznaka stylu (Opcjonalnie) | 表达式 | Zakładka Style Micro-Cap (na przykład zakładki-dodatnie). |
on-select (Opcjonalnie) | 表达式 | Pożary, gdy wybrana zakładka. |
na Odznacz (Opcjonalnie) | 表达式 | Wywołać kartę Gdy zaznaczona. |
ng-click (Opcjonalnie) | 表达式 | Zazwyczaj, zakładka po kliknięciu zostanie wybrany. Jeżeli ng Click, to nie zostanie wybrane. Można użyć $ ionicTabsDelegate.select (), aby określić etykietę przełącznika. |
ionTabs sterowania Instrukcja zezwolenia.
Metoda ta bezpośrednio wywołać usługę $ ionicTabsDelegate, kontrolować wszystkie instrukcje ionTabs. Dzięki metodzie $ getByHandle kontrolowania konkretnej instancji ionTabs.
<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); } }
select(index, [shouldChangeHistory])
Wybierz zakładkę pasujące do danego indeksu.
parametry | typ | detal |
---|---|---|
wskaźnik | 数值 | Wybierz zakładkę indeksu. |
shouldChangeHistory (Opcjonalnie) | 布尔值 | Jeśli ta opcja powinna wczytać historię przeglądania tego znacznika (jeśli występuje) oraz wykorzystanie lub załaduj tylko domyślną stronę. Wartością domyślną jest false. Wskazówka: Jeśli |
selectedIndex()
Wartość zwracana: Wartość indeksu jest wybrany tag, takich jak -1.
$getByHandle(handle)
parametry | typ | detal |
---|---|---|
uchwyt | 字符串 |
Na przykład:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);