Il miglior tutorial scheda ionico (scheda) Nel 2024, in questo tutorial puoi imparare scheda ionico (scheda)
Scheda ionico (Tab) è allineato orizzontalmente pulsanti o link per navigare tra le pagine passare. Può contenere una combinazione di testo e le icone su un dispositivo mobile è un metodo popolare di navigazione.
Utilizzare le seguenti classi container schede Compresse, ciascuno utilizzando la classe scheda-oggetto. Per impostazione predefinita, la scheda è il testo e nessuna icona.
<div class="tabs">
<a class="tab-item">
主页
</a>
<a class="tab-item">
收藏
</a>
<a class="tab-item">
设置
</a>
</div>
Per impostazione predefinita, il colore scheda è il default, è possibile impostare i seguenti stili diversi colori: schede predefinite, schede-luce, schede-stabili, schede-positivi, schede-Calm, schede equilibrato, schede-energizzato, schede-assertive, schede -Royal, schede-scuro.
Per nascondere la barra delle schede, è possibile utilizzare le schede-item-pelle di classe.
Dopo la classe di aggiungere schede schede-solo-icona classi può essere impostato per visualizzare solo la scheda Icona.
<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>
Dopo la classe di aggiungere schede schede-icon-top class icona + testo può essere fissato alla parte superiore della scheda.
<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>
Dopo la classe di aggiungere schede schede-icona-sinistra icona sul lato sinistro della classe può essere impostato scheda testo +.
<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>
È possibile aggiungere schede modello a righe sul nome di un elemento con le schede per ottenere le schede di stile come Android. È inoltre possibile aggiungere schede-top per ottenere la scheda nella parte superiore della pagina.
Strisce di colore scheda può essere controllata da schede-background-{color} e schede-colore- {color}, il valore {color} può essere: di default, leggero, stabile, positivo, calmo, equilibrato, eccitato, assertivo, reale, o scuro.
Nota: Se la testa del titolo della scheda di nuovo, è necessario utilizzare la classe ha-schede-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>
I risultati operativi sono i seguenti: