Najlepszy samouczek Zakładka jonowe (tab) W 2024 r. W tym samouczku możesz dowiedzieć się 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.
<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ę.
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>
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>
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>
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: