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