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:
