Latest web development tutorials

Zakładka jonowe Operacja Pasek

jon-tabs

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

zwyczaj 

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

API

nieruchomość typ detal
Delegat rękojeść
(Opcjonalnie)
字符串

Uchwyt z $ionicTabsDelegate zidentyfikować te karty.

jon-tab

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.

zwyczaj 

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

API

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.

$ IonicTabsDelegate

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.

zwyczaj 

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

sposób 

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 ion-nav-view w karty opcji, może być konieczne, aby ustawić go na true. 

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