Pies de página

Los pies de página nos permiten añadir una barra fija en la parte inferior de la pantalla (similar a las cabeceras) que pueden contener distintos tipos de contenidos. Para añadirlas tenemos que utilizar la directiva <ion-footer-bar> de la forma:

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

Con lo que obtendríamos un resultado similar al siguiente:

Como se puede ver en el código para indicar el título del pie de página también tenemos que añadir una etiqueta <h1> con la clase "title". Además podemos usar las clases CSS de color que vimos para las cabeceras, estas eran:

Color

Ejemplo

bar-light

bar-stable

bar-positive

bar-calm

bar-balanced

bar-energized

bar-assertive

bar-royal

bar-dark

Por lo que al añadir en el código de ejemplo anterior la clase CSS "bar-balanced" daría como resultado un pie de página en color verde.

Ejemplo

A continuación se muestra un ejemplo de como podríamos crear una aplicación con una cabecera, un pie de página y un texto dentro del área de contenido:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
            user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-positive">
          <h1 class="title">Cabecera</h1>
      </ion-header-bar>
      <ion-content class="padding">
          <h1>Mi primera aplicación</h1>
          <p>Texto de ejemplo.</p>
      </ion-content>
      <ion-footer-bar class="bar-balanced">
          <h1 class="title">Pie de página</h1>
      </ion-footer-bar>
    </ion-pane>
  </body>
</html>

Como se puede ver tanto el pie de página como la cabecera las tenemos que colocar fuera de las etiquetas <ion-content> pero dentro de la sección <ion-pane>.

Con este código obtendríamos un resultado similar al siguiente:

PreviousCabecerasNextBotones y enlaces

Last updated