Las cabeceras en Ionic se encuentran en la parte superior de la pantalla, y estas pueden tener texto, botones, iconos… existiendo algunas clases predefinidas en el Ionic a la hora de trabajar.

Añadiendo la cabecera

La clase principal de todas las barras de nuestra aplicación se identifica por la clase bar, de este modo todos los elementos de la misma deben de estar dentro de una clase bar.

Las cabeceras en Ionic se identifican por la clase bar-header, de este modo podemos introducir una cabecera en nuestras aplicaciones, tal y como vemos en el siguiente ejemplo:

<div class="bar bar-header">
    <h1 class="title">Cabecera</h1>
</div>

Aunque por defecto la cabecera aparecer con el fondo blanco y si queremos cambiarlo podemos añadir colores para la barra, según la clase bar-[color] siguiendo los colores de los que ya hablamos.

<div class="bar bar-header bar-positive">
    <h1 class="title">Cabecera</h1>
</div>

Lo cual nos da un resultado similar a:

Añadiendo elementos a la cabecera

Puede ser que necesitemos poner elementos a la cabecera como un botón al home o un botón de menú.

Para ello Ionic dispone algunas clases para poder hacerlo; buttom icon ion-navicon y button icon ion home y en el siguiente ejemplo vemos su uso. (Aunque los botones no tienen funcionalidad, eso lo veremos más adelante)

<div class="bar bar-header bar-positive">
    <button class="button icon ion-navicon"></button>
        <h1 class="title">Cabecera</h1>
    <button class="button icon ion-home"></button>
</div>

Agregando subcabeceras

Es posible agregar subcabeceras para nuestras aplicaciones e ir diferenciando secciones o mostrando información adicional, por medio de la clase bar-subheader y nuevamente podemos ponerle una clase de color.

<div class="bar bar-header bar-positive">
   <button class="button icon ion-navicon"></button>
<h1 class="title">Cabecera</h1>
   <button class="button icon ion-home"></button>
</div>
<div class="bar bar-subheader bar-energized">
   <h2 class="title">Subcabecera</h2>
</div>

El problema al incluir cabeceras y subcabeceras es que estas, se colocan por encima del contenido de la aplicación, pero por fortuna Ionic tiene una forma de hacer que nuestro contenido aparezca a continuación de la las cabeceras, tal y como vemos en el siguiente ejemplo:

<div class="bar bar-header bar-positive">
   <button class="button icon ion-navicon"></button>
       <h1 class="title">Cabecera</h1>
   <button class="button icon ion-home"></button>
</div>
<div class="bar bar-subheader bar-energized">
    <h2 class="title">Subcabecera</h2>
</div>
<ion-content class="padding has-subheader">
    Texto sin tapar por cabecera o subcabecera
</ion-content>

Utilizando ion-content y utilizando las clases padding y has-subheader o has-header logramos que nuestro contenido se establezca justamente por debajo de las cabeceras, cómo vemos en la siguiente imagen.

De esta forma podemos trabajar con las cabecera en ionic e ir viendo la potencia que puede ofrecernos desde el principio.