- Learn
- Guida Ionic Framework
- Gestire le tab dell’app con Ionic
Gestire le tab dell’app con Ionic
Creare un’interfaccia con schermate gestite tramite tab è abbastanza semplice con Ionic. L’approccio più immediato consiste nell’utilizzare le classi tabs
e tab-item
come mostrato nel seguente esempio:
<div class="tabs">
<a class="tab-item" href="#">Home</a>
<a class="tab-item" href="#">Tab1</a>
<a class="tab-item" href="#">Tab2</a>
</div>
Questo markup visualizza un’area in fondo alla pagina con i tre elementi indicati. È possibile indicare uno schema di colori specificando le classi tabs-positive
, tabs-balanced
, ecc. in modo analogo a quanto visto per altri elementi nelle sezioni precedenti. Il risultato è mostrato dalla seguente figura:

Se vogliamo visualizzare delle icone al posto del testo aggiungiamo la classe tabs-icon-only
:
<div class="tabs tabs-icon-only">
<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>
Possiamo combinare testo e icone specificando la posizione di queste ultime rispetto al testo tramite le classi tabs-icon-top
e tabs-icon-left
: nel primo caso l’icona verrà visualizzata sopra il testo, nel secondo caso verrà visualizzata alla sua sinistra. L’utilizzo di queste classi consente al framework di utilizzare le icone delle dimensioni adeguate per ospitarle nell’area insieme al testo, oltre a definire la posizione relativa. La seguente figura mostra il risultato di un insieme di tab con icone a sinistra del testo:

Possiamo sfruttare altre classi del framework per gestire al meglio i tab. Ad esempio, la classe active
utilizzata insieme alla classe tab-item
consente di evidenziare il tab selezionato. La classe tabs-top
assegnata ad un elemento esterno che contiene la definizione dei tab consente di collocare in alto i tab invece che in basso come avviene di default:
<div class="tabs-top">
<div class="tabs tabs-icon-left">
...
</div>
</div>
Oltre alla classe tabs-top
, all’elemento contenitore dei tab possono essere assegnate le classi che definiscono il colore di background dei tab ed il colore del testo e delle icone. Per il primo caso può essere utilizzata la classe tabs-background-positive
o uno degli altri schemi di colore, mentre nel secondo caso utilizzeremo la classe tabs-color-light
o eventuali altri colori.
Se vuoi aggiornamenti su AngularJS, JavaScript, mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
AVG Antivirus: cosa succede in caso di virus?
AVG Antivirus fornisce protezione contro malware e virus a diversi livelli. Per evitare che l’utente installi software malevolo da Internet, […]