Ionic - Piè di pagina Javascript

Questa direttiva aggiungerà una barra a piè di pagina nella parte inferiore dello schermo.

Utilizzo del piè di pagina

Il piè di pagina ionico può essere aggiunto applicando un ion-footer-barclasse. Lavorare con esso equivale a lavorare con l'intestazione. Possiamo aggiungere un titolo e posizionarlo sul lato sinistro, centrale o destro dello schermo usando ilalign-titleattributo. Con il prefissobar, possiamo usare i colori ionici. Creiamo un piè di pagina di colore rosso con il titolo al centro.

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

Il codice precedente produrrà la seguente schermata:

Aggiunta di elementi

Possiamo aggiungere icone di pulsanti o altri elementi al file ion-footer-bare verrà applicato il loro stile. Aggiungiamo un pulsante e un'icona al nostro piè di pagina.

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

Il codice precedente produrrà la seguente schermata -

Aggiunta di un piè di pagina

Ti abbiamo mostrato come utilizzare un'intestazione secondaria. Allo stesso modo è possibile creare un sotto piè di pagina. Sarà posizionato sopra la barra piè di pagina. Tutto quello che dobbiamo fare è aggiungere un filebar-subfooter classe al nostro ion-footer-bar elemento.

Nell'esempio che segue, aggiungeremo il sotto-piè di pagina sopra la barra del piè di pagina, che abbiamo creato in precedenza.

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

Il codice precedente produrrà la seguente schermata: