ionische Registerkarte (Tab)
ionische Registerkarte (Tab) horizontal Schaltflächen oder Links ausgerichtet zu navigieren zwischen den Seiten wechseln. Es kann eine Kombination von Text und Symbolen auf einem mobilen Gerät eine beliebte Methode der Navigation ist.
Verwenden Sie die folgenden Registerkarten Registerkarten Container-Klassen, die jeweils Registerkarte Sie den Punkt-Klasse. Standardmäßig ist die Registerkarte Text und kein Symbol.
Beispiele
<div class="tabs">
<a class="tab-item">
主页
</a>
<a class="tab-item">
收藏
</a>
<a class="tab-item">
设置
</a>
</div>
Standardmäßig ist die Registerkarte Farbe die Standard Sie folgende verschiedene Farbstile festlegen können: Registerkarten-default-Tabs Licht, Tabs stabil, Tabs-positive, Tabs-Ruhe, Tabs ausgeglichen, Registerkarten abgefallen, Registerkarten-drängend, Tabs -Royal, Tabs-dunkel.
Um die Tab-Leiste verbergen, können Sie Registerkarten-Element-hide-Klasse verwenden.
Icon Registerkarte
Nachdem die Klasse Registerkarten hinzufügen Registerkarten-nur-Symbol können Klassen nur das Symbol Registerkarte anzuzeigen gesetzt werden.
<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>
Top-Symbol + Text tab
Nachdem die Klasse Registerkarten hinzufügen Registerkarten-icon-Spitzenklasse Symbol + Text kann am oberen Rand der Registerkarte eingestellt werden.
<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>
Links neben dem Symbol + Text Registerkarte
Nachdem die Klasse Registerkarten Registerkarten-icon-links-Symbol auf der linken Seite der Klasse hinzufügen können + Text Registerkarte eingestellt werden.
<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>
Gestreifte Registerkarte Stil
Sie können mit Registerkarten Registerkarten-Streifenmuster auf dem Elementnamen hinzufügen, um Android-Stil Tabs zu erreichen. Sie können auch Tabs-top zu erreichen, um die Register am oberen Rand der Seite hinzufügen.
Stripes Registerkarte Farbe kann durch Registerkarten-Hintergrund- {color} und Tabs-farb- {color} gesteuert werden, {color} Wert sein kann: default, leicht, stabil, positiv, ruhig, ausgeglichen, mit Energie versorgt, durchsetzungsfähig, königlich, oder dunkel.
Hinweis: Wenn der Kopf des Titels auf der Registerkarte wieder, müssen Sie die zu verwenden hat-Tabs-Spitzenklasse.
<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>
Die operativen Ergebnisse sind wie folgt: