Zakładka jonowe (tab)
jonowa karta (Tab) jest poziomo wyrównane przycisków lub linki do stron przełączać pomiędzy poruszać. Może zawierać połączenie tekstu i ikon na urządzeniu przenośnym jest popularną metodą nawigacji.
Użyj następujących kart tabs klas kontenerowych, każda zakładka użyciu klasy tab-punkt. Domyślnie zakładka jest tekst i żadna ikona.
Przykłady
<div class="tabs">
<a class="tab-item">
主页
</a>
<a class="tab-item">
收藏
</a>
<a class="tab-item">
设置
</a>
</div>
Domyślnie kolor zakładka jest domyślnym, można ustawić następujące różne style kolorów: zakładki domyślne, klapki, lekkie, tabs-stabilne, tabs-dodatnie, tabs-spokój, przekładki zbilansowana, przekładki pobudzony, tabs-asertywne, przekładki -royal wykonawcy ciemności.
Aby ukryć pasek kart, można użyć zakładki-item-hide klasę.
Zakładka Ikona
Po klasa dodać zakładki tabs-ikonę tylko ćwiczenia można ustawić wyświetlanie tylko kartę ikon.
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
Górna ikona + karta tekstu
Po klasa dodać zakładki zakładki-icon-top class ikona + tekst może być ustawiony w górnej części zakładki.
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
Na lewo od tekstu ikona + TAB
Po klasa dodać zakładki tabs-icon-lewo ikonę po lewej stronie grupy można ustawić na karcie tekst +.
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
Zakładka Style w paski
Możesz dodać tabs-pasiasty wzór na nazwę elementu z kartami do osiągnięcia kart stylu, jak Android. Można również dodać tabs-top osiągnąć zakładkę na górze strony.
Zakładka paski koloru może być kontrolowana przez tabs-tle-{color} i tabs-zastosowaniu przyjemnej dla oka {color} {color} wartość może być: default, lekki, trwały, pozytywny, spokojny, zrównoważony, pobudzony, asertywny, królewski, lub ciemne.
Uwaga: Jeśli szef Tytuł na karcie ponownie, trzeba użyć klasy ma-tabs-top.
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
Wyniki operacyjne przedstawiają się następująco: