Ionico - Piè di pagina

Ionic footersi trova nella parte inferiore della schermata dell'app. Lavorare con i piè di pagina è quasi uguale a lavorare con le intestazioni.

Aggiunta di piè di pagina

La classe principale per i piè di pagina ionici è bar(lo stesso dell'intestazione). Quando vuoi aggiungere un piè di pagina alle tue schermate, devi aggiungerebar-footer class al tuo elemento dopo il main barclasse. Dal momento che vogliamo utilizzare il nostro piè di pagina su ogni schermata dell'app, lo aggiungeremo al filebody del index.htmlfile. Aggiungeremo anche un titolo per il nostro piè di pagina.

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

Il codice precedente produrrà la seguente schermata:

Colori piè di pagina

Se vuoi dare uno stile al tuo piè di pagina, devi solo aggiungere la classe di colore appropriata ad esso. Quando modifichi i tuoi elementi, devi aggiungere la tua classe di elementi principale come prefisso alla tua classe di colori. Dato che stiamo disegnando una barra a piè di pagina, la classe del prefisso sarà unbar e la classe di colore che vogliamo usare in questo esempio è assertive (rosso).

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

Il codice precedente produrrà la seguente schermata:

Puoi utilizzare una delle seguenti nove classi per dare un colore a tua scelta al piè di pagina dell'app:

Classe di colore Descrizione Risultato
luce bar Da utilizzare per il colore bianco  
bar stabile Da utilizzare per il colore grigio chiaro  
bar-positivo Da utilizzare per il colore blu  
bar-calma Da utilizzare per il colore azzurro  
equilibrato Da utilizzare per il colore verde  
energizzato al bar Da utilizzare per il colore giallo  
bar-assertivo Da utilizzare per il colore rosso  
bar-royal Da utilizzare per il colore viola  
bar-buio Da utilizzare per il colore nero  

Elementi piè di pagina

I piè di pagina possono contenere elementi al suo interno. La maggior parte delle volte dovrai aggiungere pulsanti con icone all'interno di un piè di pagina.

Il primo pulsante aggiunto sarà sempre nell'angolo sinistro. L'ultimo sarà posizionato a destra. I pulsanti in mezzo saranno raggruppati accanto al primo sul lato sinistro del tuo piè di pagina. Nell'esempio seguente, puoi anche notare che utilizziamo l'estensioneicon classe per aggiungere icone sopra i pulsanti.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

Il codice precedente produrrà la seguente schermata:

Se vuoi spostare il tuo pulsante a destra puoi aggiungere pull-right classe.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

Il codice precedente produrrà la seguente schermata: