Páginas

Cada una de las pantallas de una aplicación en Ionic se crea utilizando una página (o page). Por defecto con cada proyecto ya se incluyen páginas de inicio, incluso si creamos el proyecto usando la plantilla "blank" se nos añadirá una página. La página principal en estas plantilla se suele llamar "home" y la encontraremos situada en la carpeta "src/app/home".

Esta carpeta "src/app" es donde se almacenarán todas las páginas de nuestro proyecto. Cada página irá alojada en su propia carpeta y contendrá tres ficheros básicos (la clase que define la página, la plantilla y una hoja de estilo). Por ejemplo, para la página home tendremos:

• home.page.html - Esta es la plantilla de la página "home".

• home.page.scss - Hoja de estilo en formato SASS.

• home.page.ts - Fichero con la definición de la clase en TypeScript.

Además en esta carpeta encontraremos otros dos ficheros con la definición del módulo de la página (home.module.ts) y el fichero para definir los test automatizados para esta página (home.page.spec.ts).

De momento vamos a centrarnos en la plantilla y más adelante explicaremos cómo utilizar la hoja de estilo y cómo funciona el fichero TypeScript con la definición de la página.

Si abrimos esta plantilla veremos que por defecto se incluye el siguiente código:

<ion-header>
  <ion-toolbar>
    <ion-title>Ejemplo</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  ...
</ion-content>

Este código se divide en dos partes: una sección de cabecera (ion-header) donde se incluirán la barra (o toolbar) superior con el título de la página, y una sección de contenido (ion-content) donde tendremos que incluir el contenido de la página (listados, botones, etc.).

Además, como se puede ver en el ejemplo, por defecto se añade el atributo "padding" a la etiqueta de contenido. De esta forma se creará un pequeño margen entre los contenidos y el borde la pantalla. Por defecto deberemos dejar esta opción, a no ser que queramos que nuestros componentes aparezcan pegados al borde de la pantalla (como por ejemplo cuando incluyamos un listado de elementos).

En algunos ejemplos o tutoriales podremos ver otras formas de aplicar este padding, como incluyendo un <div> que aplique la clase CSS ios-padding dentro del contenido (es decir, <div class="ion-padding">...</div>), o aplicando esta misma clase en la propia etiqueta ion-content. Estas opciones son equivalentes al uso del atributo (o directiva) padding.

Dentro del área de contenidos podemos escribir HTML normal, por ejemplo:

<ion-content padding>
  <h1>Mi título</h1>
  <p>Párrafo de ejemplo con un <a href="#">enlace</a>!</p>
  <img src="assets/icon/favicon.png" width="20%" />
</ion-content>

Con lo que obtendríamos:

Sin embargo Ionic incluye una serie de componentes para ayudarnos a diseñar el aspecto visual de nuestas aplicaciones. En la siguiente sección veremos los componentes que podemos utilizar para este fin.