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/pages/home".

Esta carpeta "pages" 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 (la clase que define la página, la plantilla y una hoja de estilo). Por ejemplo, para la página home tendremos:

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

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

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

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-navbar>
    <ion-title>Ejemplo</ion-title>
  </ion-navbar>
</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 las opciones de navegación y 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).

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/imgs/logo.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.