Cabeceras

Los elementos cabecera nos permiten poner una región fija en la parte superior de la aplicación que puede contener un título, botones a la izquierda o a la derecha además de otros componentes. A continuación se incluye un ejemplo:

El código para escribir esta cabecera sería el siguiente:

<ion-header-bar>
    <h1 class="title">Header</h1>
</ion-header-bar>

Como se puede ver la cabecera está formada por la directiva <ion-header-bar> y una etiqueta <h1> con la clase title para incluir el título en el centro.

Ionic incluye además varias clases CSS que podemos utilizar para modificar el color de la cabecera, estas son:

Color

Ejemplo

bar-light

bar-stable

bar-positive

bar-calm

bar-balanced

bar-energized

bar-assertive

bar-royal

bar-dark

Estas clases CSS la tenemos que añadir a la definición de nuestra barra, por ejemplo, para que la barra aparezca en azul usaríamos el código:

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

O para que aparezca en un color oscuro:

<ion-header-bar class="bar-dark">
    <h1 class="title">bar-dark</h1>
</ion-header-bar>

Además también podemos usar el atributo align-title para indicar la alineación del título. A continuación se muestra un ejemplo completo:

<!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" align-title="center">
        <h1 class="title">Título</h1>
      </ion-header-bar>
      <ion-content class="padding">
        ...
      </ion-content>
    </ion-pane>
  </body>
</html>

Como se puede ver la cabecera la tenemos que colocar fuera de las etiquetas <ion-content> pero dentro de la sección <ion-pane>.

PreviousÁrea de contenidosNextPies de página

Last updated