Una vez que ya hemos visto las cabeceras, es el momento de ver como trabajamos con el footer en Ionic.

Para introducir el footer en Ionic debemos de encapsularlo dentro de una clase bar, y a continuación introducir la clase bar-footer. También podemos incluir los colores que queramos de la misma forma que hicimos con las cabeceras, utilizando la clase bar-[tipo de color que queramos].

En el siguiente código podemos ver la forma de usar estas clases y su resultado:

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

Elementos del footer

El footer puede contener diversos elementos en su interior, la mayoría de las veces serán botones e iconos.

Estos elementos se irán colocando a la izquierda del footer y cada elemento nuevo se colocará a la derecha del anterior. Excepto el último que siempre se colocará a la derecha del footer.

Para crear estos botones, utilizaremos la clase button seguida de la clase icon y finalmente de la clase del botón que queremos introducir.

En el siguiente código podemos ver como funciona esto:

<div class="bar bar-footer bar-balanced">
    <a class="button icon ion-navicon"></a>
    <a class="button icon ion-home"></a>
    <a class="button icon ion-star"></a>
</div>

 Podemos también introducir un botón directamente a la derecha si queremos introduciéndole la clase pull-right

<div class="bar bar-footer bar-balanced">
    <a class="button icon ion-home pull-right"></a>
</div>

Con esto ya sabemos como introducir el footer en Ionic, en la próxima entrada aprenderemos a utilizar los botones dentro del contenido.

Ahora si te ha sido útil comparte este artículo en twitter o deja un comentario.