Ionic - Pie de página de JavaScript

Esta directiva agregará una barra de pie de página en la parte inferior de la pantalla.

Usar pie de página

El pie de página iónico se puede agregar aplicando un ion-footer-barclase. Trabajar con él es lo mismo que trabajar con el encabezado. Podemos agregar un título y colocarlo en el lado izquierdo, central o derecho de la pantalla usando elalign-titleatributo. Con el prefijobar, podemos utilizar los colores jónicos. Creemos un pie de página de color rojo con el título en el centro.

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

El código anterior producirá la siguiente pantalla:

Agregar elementos

Podemos agregar botones, iconos u otros elementos al ion-footer-bary se aplicará su peinado. Agreguemos un botón y un ícono a nuestro pie de página.

<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>

El código anterior producirá la siguiente pantalla

Agregar sub pie de página

Le mostramos cómo usar un encabezado secundario. De la misma forma que se puede crear un pie de página secundario. Estará ubicado encima de la barra de pie de página. Todo lo que tenemos que hacer es agregar unbar-subfooter clase a nuestra ion-footer-bar elemento.

En el ejemplo que sigue, agregaremos el pie de página por encima de la barra de pie de página, que creamos anteriormente.

<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>

El código anterior producirá la siguiente pantalla: