Menú de navegación en Ionic 3

El menú de navegación es un componente muy común en muchas de las aplicaciones móviles que desarrollamos día a día. En la entrada de hoy explicaremos cómo utilizar el menú para
permitir a los usuarios cambiar a diferentes páginas en la aplicación.

El menú deberá colocarse a la izquierda o derecha en las posiciones de la página principal. También permitirá detectar eventos y personalizar apariencias.

¿Qué tipo de menú de navegación en Ionic vamos a desarrollar?

Esta es una captura de pantalla de la aplicación que desarrollaremos:

La aplicación tendrá dos páginas y dos menús, se podrá mostrar bien sea el contenido del menú de la izquierda o el de la derecha, pero nunca ambos al mismo tiempo. Realmente, raro es el caso en el cual una aplicación disponga de dos menús simultáneos, pero para mostrar este ejemplo nos vendrá muy bien.

Esta aplicación se puede ejecutar en el navegador, por lo que no es necesario tener un dispositivo físico disponible.

Preparativos.

1. Cramos una nueva aplicación con el nombre LeftRightMenu utilizando la plantilla de sidemenu. Por lo tanto vamos a ejecutar en nuestro cmd la siguiente línea.

   ionic start LeftRightMenu sidemenu

2. Al terminar la instalación, en mi caso le he dicho que me relacione la aplicación con mi aplicación Ionic View. Esto mismo se explicó en el capítulo anterior, por lo tanto no vamos a entrar en detalle: Ver aplicaciones en Ionic 3 desde el móvil.
3. Accedemos al directorio del proyecto.

   cd LeftRightMenu

4. Comprobamos que la arquitectura de nuestra aplicación es similar a lo que mostramos a continuación.

Creando nuestro Menú de navegación en Ionic 3

Haciendo uso de nuestro editor de código favorito, vamos a abrir el script /src/app/app.component.ts y reemplazamos el código existente por el que pasamos a continuación.

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // luisjordan.net - Declaramos una nueva variable para controlar el texto mostrado
  text: string = '';

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

  rightMenuClick(text) {
    this.text = text;
  }
}

Continuamos trabajando en el script /src/app/app.html y lo dejamos tal cual indico en las siguientes líneas.

<ion-menu id="leftMenu" [content]="content" side="left" type="overlay">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}</button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-menu id="rightMenu" [content]="content" side="right" type="reveal">
  <ion-header>
    <ion-toolbar>
      <ion-title>Items</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="rightMenuClick('Item One')">Item UNO</button>
      <button ion-item (click)="rightMenuClick('Item Two')">Item DOS</button>
    </ion-list>
    <ion-card *ngIf="text">
      <ion-card-content>
        Tu has pulsado {{ text }}
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Ahora, vamos a crear dos páginas, para lo cual sólo tienes que modificar las páginas estándar de la plantilla «sidemenu». Vamos a abrir y editar el script del cual disponemos en la siguiente ruta /src/app/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>luisjordan.net</ion-title>
    <ion-buttons start>
      <button ion-button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button menuToggle="rightMenu">
<ion-icon name="menu"></ion-icon>
</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding class="getting-started">
  <h3>Bienvenido al doble menú</h3>
  <p>
    Puedes abrir cualquiera de los menús laterales, bien el derecho o bien el izquierdo haciendo uso de los botones o los elementos de navegación.
  </p>
  <ion-row>
    <ion-col width-50>
      <button ion-button primary block menuToggle="leftMenu">Izquierdo</button>
    </ion-col>
    <ion-col width-50>
      <button ion-button primary block menuToggle="rightMenu">Derecho</button>
    </ion-col>
  </ion-row>
</ion-content>

Continuando en el directorio home, abrimos y editamos el archivo que hace referencia a los estilos home.scss.

.getting-started {
  p {
    margin: 20px 0;
    line-height: 22px;
    font-size: 16px;
  }
}

.bar-button-menutoggle {
  display: inline-flex;
}

Y el último de los pasos va a ser modificar la segunda página que por defecto se llama list, podemos acceder a ella desde /src/app/pages/list/list.html y dejaremos el código que muestro a continuación.

<ion-header>
  <ion-navbar>
    <ion-title>Page Two</ion-title>
    <ion-buttons start>
      <button ion-button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button menuToggle="rightMenu">
<ion-icon name="menu"></ion-icon>
</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event,
item)">
<ion-icon [name]="item.icon" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

En este momento ya tenemos todo nuestro código listo, vamos a lanzar la aplicación vía browser ejecutando como siempre ionic serve -l.

Explicación acerca de Menú de navegación en Ionic 3.

Entrando en detalle app.js carga las plantillas de menú en app.html.
El menú de la izquierda activará la función de openPage() para abrir PageTwo
El menú de la derecha activará la función rightMenuClick() para cambiar el this.text propiedad y visualiza en la pantalla.
En la plantilla app.html, el menú de la izquierda tiene las siguientes propiedades: lado = «izquierda» tipo = «overlay». Sin embargo, el menú de la derecha tiene el siguiente asignado en su lugar: lado = «derecha» tipo = «revelar».

La propiedad lado determinará donde mostrarse el menú. Hay dos tipos de menús. La opción de superposición dejará la página de centro como es, sin moverse.
Cada directiva de ion-menú debe tener [contenido] = «contenido», declarada porque utilizará el área de contenido para enlazar al ser pulsado el botón izquierdo o derecho. En este caso, básicamente es una variable local en ion-nav: <ion-nav id=»nav» [root]=»rootPage» #content swipeBackEnabled=»false»> </ion-nav>

El uso de la barra de herramientas de ionic dentro de ion-menú es opcional si quieres tener el título para su menú.

<ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}</button>
</ion-list>

*ngFor actúa a modo de reemplazo y es necesario utilizar let p ya que es lo mismo que declarar una variable local denominada p. Se trata de mejorar las prácticas de aislamiento de variables. De este modo, Ionic dispone de p.title para cada elemento de la matriz de páginas.

En el menú derecho, en lugar de ir a una página diferente a través de nav.setRoot(), lo que hacemos es mostrar un par de enlaces que a su vez lo que hacen es de forma dinámica mostrar unos textos en la sección de contenido como se muestra a continuación:

<ion-card *ngIf="text">
    <ion-card-content>
        Tu has pulsado {{ text }}
    </ion-card-content>
</ion-card>

Más cosas acerca de Menú de navegación en Ionic 3…

Así que, si la variable de texto no existe (esto quiere decir que el usuario no ha hecho click sobre una sección del menú), la tarjeta de Ionic no mostrará nada gracias al condicional *ngIf.
Para cada página, tienes que declarar la misma barra de ionic. De lo contrario, perderá la parte superior de navegación y los botones para los menús:

<ion-header>
  <ion-navbar>
    <ion-title>Page Two</ion-title>
    <ion-buttons start>
      <button ion-button menuToggle="leftMenu">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button menuToggle="rightMenu">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Observemos que  leftMenu y rightMenu son el mismo id que usamos antes, en el app.html. En la primera página, hay dos botones para activar los menús desde dentro de la página de contenido como se muestra a continuación:

<ion-row>
    <ion-col width-50>
      <button ion-button primary block menuToggle="leftMenu">Izquierdo</button>
    </ion-col>
    <ion-col width-50>
      <button ion-button primary block menuToggle="rightMenu">Derecho</button>
    </ion-col>
</ion-row>

Estos dos botones también llaman a menuToggle para que sea activado. Ya que Ionic hace uso de flexbox, es muy sencillo utilizarlo, solo tienes que crear ion-col y ion-fila. La propiedad de ancho, con un número, determinará el ancho del porcentaje.

Y bueno poco más, hoy finaliza aquí el post.

Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.

Versiones utilizadas, tiempo y dificultad de desarrollo:

Dificultad del ejercicio: Iniciación.
Tiempo de realización: 20 minutos.
Ionic Framework version: 3.2.0
Node versión: 7.5.0
NPM versión: 4.6.1
Cordova versión: 7.0.1
Sistema operativo: Windows 7