Navegación mediante tabs

Si creamos un proyecto usando la plantilla "tabs" se nos creará una aplicación en Ionic con el sistema de navegación mediante tabs. Este es un buen inicio para una aplicación de este tipo. En este caso el menú de navegación lo podremos encontrar en el componente "tabs" que estará dentro de la carepta "pages". Este componente tiene una plantilla asociada con el siguiente contenido:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Que se corresponde con la barra de navegación tipo tabs con las tres opciones incluidas por defecto. Además, si visualizamos la clase asociada podremos ver cómo se asignan cada una de estas páginas:

export class TabsPage {
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() { }
}

Para añadir o modificar una página de este menú en primer lugar tendremos que añadir el import de la página que queramos, por ejemplo:

import { SettingsPage } from '../settings/settings';

En caso de que queramos cambiar una opción del menú podríamos cambiar una de las variables utilizadas, por ejemplo:

tab3Root = SettingsPage;

Y también editamos la plantilla para cambiar el título y el icono del tercer elemento del tab:

<ion-tab [root]="tab3Root" tabTitle="Settings" tabIcon="settings"></ion-tab>

En caso de que queramos añadir una nueva opción simplemente tendríamos que crear una nueva variable (tab4Root) que referencie a la nueva página y también tendríamos que modificar la plantilla para añadir la nueva opción.