Ionic - zakładki JavaScript

Karty to przydatny wzorzec dla dowolnego typu nawigacji lub wybierania różnych stron w aplikacji. Te same zakładki pojawią się u góry ekranu dla urządzeń z systemem Android i u dołu dla urządzeń z systemem IOS.

Korzystanie z kart

Karty można dodawać do aplikacji za pomocą ion-tabs jako element kontenera i ion-tabjako element treści. Dodamy go doindex.html, ale możesz dodać go do dowolnego pliku HTML w swojej aplikacji. Tylko pamiętaj, aby nie dodawać go do plikuion-content aby uniknąć problemów z CSS, które się z tym wiążą.

index.html Kod

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

Dane wyjściowe będą wyglądać tak, jak pokazano na poniższym zrzucie ekranu.

Dostępny jest interfejs API dla ion-tabelementy. Możesz dodać go jako atrybuty, jak pokazano w powyższym przykładzie, w którym używaliśmytitle, icon-on i icon-off. Ostatnie dwa służą do odróżnienia wybranej karty od reszty. Jeśli spojrzysz na powyższy obrazek, zobaczysz, że wybrana jest pierwsza karta. Resztę atrybutów możesz sprawdzić w poniższej tabeli.

Atrybuty karty

Atrybut	Rodzaj	Detale
tytuł	strunowy	Tytuł zakładki.
href	strunowy	Łącze używane do nawigacji po kartach.
Ikona	strunowy	Ikona zakładki.
ikona na	strunowy	Ikona karty po wybraniu.
ikona wyłączona	strunowy	Ikona karty, gdy nie jest zaznaczona.
odznaka	wyrażenie	Odznaka dla karty.
w stylu odznaki	wyrażenie	Styl plakietki dla karty.
on-select	wyrażenie	Wywoływane po wybraniu karty
on-deselect	wyrażenie	Wywoływane, gdy karta jest odznaczona
ukryty	wyrażenie	Służy do ukrywania karty.
wyłączone	wyrażenie	Służy do wyłączania karty.

Karty mają również własną usługę delegowania, która ułatwia kontrolę wszystkich kart w aplikacji. Można go wstrzyknąć do kontrolera i ma kilka metod, które przedstawiono w poniższej tabeli.

Metody delegowania

metoda	Parametry	Rodzaj	Detale
selectedIndex ()	/	numer	Zwraca indeks wybranej karty.
$ getByHandle (parametr1)	uchwyt	strunowy	Służy do łączenia metod z określonym widokiem karty z tym samym uchwytem. Uchwyt można dodać doion-tabs używając delegate-handle = "my-handle" atrybut. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();