Tutorial de IONIC: Navegación por Tabs

Hoy vamos a aprender cómo se genera una aplicación con varias páginas en forma de tabs o pestañas y veremos cómo podemos navegar entre ellas, para ello vamos a crear un nuevo proyecto de ejemplo.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Indice Tutorial Ionic >>

Vamos a utilizar la plantilla tabs para crear nuestra aplicación lo que nos generará un proyecto con una estructura ya creada para utilizar tabs.

Desde la consola de comandos o terminal escribimos:

 ionic start ejemploTabs tabs

Como siempre elegimos Angular como framework y a la pregunta “Integrate your new app with Capacitor to target native iOS and Android?” respondemos que No.

Al crear nuestra aplicación con la plantilla tabs nos genera por defecto tres tabs.

Nos situamos como siempre dentro de la carpeta del proyecto que acabamos de crear desde la consola, si ejecutamos el comando ionic serve -l podemos ver algo como esto:

Recuerda que al ejecutar ionic serve con el parámetro -l te preguntará si quieres instalar @ionic/lab.

También puedes comprobar como quedaría en un dispositivo móvil sin necesidad de instalar @ionic/lab, utilizando el inspector de Chrome (boton derecho en cualquier parte de la página y seleccionando inspeccionar), y seleccionando la vista móvil en el panel:

Veamos ahora el código que se ha generado al iniciar el proyecto:

Lo primero que podemos observar es que que se han generado 5 carpetas dentro de src/app, una carpeta llamada explorer-container que contiene un componente que se va a utilizar en las páginas de los tabs, veremos que son los componentes y cómo se crean más adelante, después una por cada tab (tab1,tab2,y tab3) y por último otra llamada tabs:

tab1, tab2 y tab3 son páginas normales como las que ya conocemos que simplemente contienen lo que queramos que se muestre en cada pestaña.

La página tabs es la página maestra donde vamos a mostrar los tabs con los iconos y controlar la ruta para que se muestre el contenido de la página correspondiente al tab activo.

Si vemos el contenido de la carpeta tabs podemos observar que contiene los archivos típicos de cualquier página en ionic, pero además contiene otro archivo llamado tabs.router.module.ts que es módulo donde se define las ruta de cada tab:

Vamos antes de nada a ver como es el html para crear los tabs con sus correspondientes iconos, si abrimos en el editor el archivo tabs.page.html vemos que contiene el siguiente código:

 
<ion-tabs>
 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
 
</ion-tabs>

Es bastante intuitivo, tenemos la etiqueta ion-tabs que es el contenedor general para los tabs.

Después tenemos el componente ion-tab-bar donde definimos la barra donde se va a mostrar los iconos de los tabs, vemos que además tiene el atributo slot=”bottom”, con este atributo le estamos indicando que la barra se tiene que mostrar en la parte inferior de la pantalla.

Si queremos que los tabs se muestren en la parte superior deberemos cambiar slot=”bottom” por slot=”top”.

Por último definimos el botón de cada tab con el componente ion-tab-button que como vemos lleva el atributo tab=”tab1″ donde le indicamos el nombre del tab que se debe activar al pulsar sobre él, este nombre es importante para posteriormente indicar en las rutas.

Dentro cada tab contiene un ion-icon donde indicamos que icono se debe mostrar con el atributo name, y un ion-label con el texto que queremos que se muestre en cada pestaña.

Si solo queremos que se muestre el icono sin ningún texto solo tenemos que eliminar la etiqueta ion-label.

El listado de iconos disponibles lo podéis consultar el la documentación oficial de ionic desde el siguiente enlace: https://ionicframework.com/docs/ionicons/

Los iconos a su vez puede tener tres estilos diferentes:

Outline.
Filled.
Sharp

Bien, veamos ahora el contenido del archivo tabs.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Lo interesante aquí es la declaración de las rutas de los tabs:

Vemos que se declara la constante routes y dentro indicamos que el path ‘tabs’ está asociado al componente TabsPage, y luego como “hijos” (children) están definidos cada uno de los tabs con su ruta indicada en path y a su vez en children se carga con loadChildren el módulo de la página a mostrar.

Puede resultar un poco engorroso, pero no debes preocuparte demasiado, el trabajo de crear las rutas ya lo hace ionic por tí, solo debes hacer algunos cambios siguiendo esta estructura si quieres añadir un nuevo tab a tu proyecto, vamos a ver como se hace a continuación.

Como el contenido que se muestra en cada tab es una página, si queremos añadir un nuevo tab a nuestro proyecto crearemos una nueva página, por lo tanto vamos a crear una nueva página llamada tab4:

ionic g page tab4

Al crear una página nueva ionic automáticamente añade la ruta de la página a app-routing.module.ts, en este caso no nos interesa porque la página tab4 va a depender de la página maestra tabs y que tiene su propio módulo para definir las rutas (tabs.router.module.ts), tal y como hemos visto, por lo tanto vamos a editar el archivo app-routing.module.ts y eliminamos la siguiente línea que nos ha generado:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
 { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
 // { path: 'tab4', loadChildren: './tab4/tab4.module#Tab4PageModule' } // debemos eliminar esta línea
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule {}

Ahora vamos a definir la ruta del nuevo tab en tabs.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}
 

Simplemente hemos copiado la estructura de los otros tabs para el tab4:
... 
 {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
 },
 
…

Ya solo nos queda modificar el html del archivo tabs.page.html para añadir el botón de la nueva pestaña:

<ion-tabs>
 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab3">
      <ion-icon name="cube"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="tab4">
      <ion-icon name="alarm"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>
 
  </ion-tab-bar>
 
</ion-tabs>