Ionic - Schede Javascript

Le schede sono un modello utile per qualsiasi tipo di navigazione o per selezionare pagine diverse all'interno della tua app. Le stesse schede appariranno nella parte superiore dello schermo per i dispositivi Android e in basso per i dispositivi IOS.

Utilizzo delle schede

Le schede possono essere aggiunte all'app utilizzando ion-tabs come elemento contenitore e ion-tabcome elemento di contenuto. Lo aggiungeremo al fileindex.html, ma puoi aggiungerlo a qualsiasi file HTML all'interno della tua app. Assicurati solo di non aggiungerlo all'interno del fileion-content per evitare problemi CSS che ne derivano.

index.html Codice

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

L'output apparirà come mostrato nello screenshot seguente.

Sono disponibili API per ion-tabelementi. Puoi aggiungerlo come attributi come mostrato nell'esempio sopra dove abbiamo usatotitle, icon-on e icon-off. Gli ultimi due vengono utilizzati per differenziare la scheda selezionata dal resto. Se guardi l'immagine sopra, puoi vedere che la prima scheda è selezionata. Puoi controllare il resto degli attributi nella seguente tabella.

Attributi di tabulazione

Attributo genere Dettagli
titolo corda Il titolo della scheda.
href corda Il collegamento utilizzato per la navigazione con le schede.
icona corda L'icona della scheda.
icona corda L'icona della scheda quando selezionata.
icona disattivata corda L'icona della scheda quando non è selezionata.
distintivo espressione Il badge per la scheda.
stile distintivo espressione Lo stile del badge per la scheda.
alla selezione espressione Chiamato quando è selezionata la scheda
on-deseleziona espressione Chiamato quando la scheda è deselezionata
nascosto espressione Utilizzato per nascondere la scheda.
Disabilitato espressione Utilizzato per disabilitare la scheda.

Le schede hanno anche il proprio servizio delegato per un controllo più semplice di tutte le schede all'interno dell'app. Può essere iniettato nel controller e ha diversi metodi, che sono mostrati nella tabella seguente.

Metodi delegati

Metodo Parametri genere Dettagli
selectedIndex () / numero Restituisce l'indice della scheda selezionata.
$ getByHandle (parametro1) maniglia corda Utilizzato per collegare metodi a una particolare visualizzazione a schede con lo stesso handle. È possibile aggiungere la manigliaion-tabs usando delegate-handle = "my-handle" attributo. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();