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:
Last updated
Was this helpful?