Ionico - Tabs

Ionic tabssono la maggior parte del tempo utilizzati per la navigazione mobile. Lo stile è ottimizzato per diverse piattaforme. Ciò significa che sui dispositivi Android, le schede verranno posizionate nella parte superiore dello schermo, mentre su IOS saranno in basso. Esistono diversi modi per creare schede. Capiremo in dettaglio come creare schede in questo capitolo.

Schede semplici

Il menu Schede semplici può essere creato con un file tabsclasse. Per l'elemento interno che utilizza questa classe, dobbiamo aggiungeretab-itemelementi. Poiché le schede vengono solitamente utilizzate per la navigazione, useremo<a>tag per gli elementi delle schede. L'esempio seguente mostra un menu con quattro schede.

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

Il codice precedente produrrà la seguente schermata:

Aggiunta di icone

Ionic fornisce classi per l'aggiunta di icone alle schede. Se desideri che le tue schede abbiano icone senza testo, atabs-icon-only class dovrebbe essere aggiunto dopo il tabsclasse. Ovviamente è necessario aggiungere le icone che si desidera visualizzare.

<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-planet"></i>
   </a>
</div>

Il codice precedente produrrà la seguente schermata:

Puoi anche aggiungere icone e testo insieme. Iltabs-icon-top e tabs-icon-leftsono classi che posizioneranno l'icona rispettivamente sopra o sul lato sinistro. L'implementazione è la stessa dell'esempio dato sopra, aggiungeremo semplicemente una nuova classe e un nuovo testo che vogliamo usare. L'esempio seguente mostra le icone posizionate sopra il testo.

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

Il codice precedente produrrà la seguente schermata:

Linguette a strisce

Le schede a strisce possono essere create aggiungendo un contenitore attorno alle nostre schede con l'estensione tabs-stripedclasse. Questa classe consente l'utilizzo ditabs-background e il tabs-color prefissi per l'aggiunta di alcuni dei colori ionici al menu delle schede.

Nell'esempio seguente, useremo il tabs-background-positive (blu) per modellare lo sfondo del nostro menu e il tabs-color-light(bianco) per definire lo stile delle icone delle schede. Notare la differenza tra la seconda scheda attiva e le altre due che non lo sono.

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

Il codice precedente produrrà la seguente schermata: