Ionic Menu | Conoce todos los secretos de ion-menu aquí

¿Buscando información sobre el Ionic Menu? O, quizás, ya sabes cómo se utilizan, pero tienes alguna duda ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás de una manera sencilla y práctica cómo puedes comenzar a usar los menús que te proporciona el framework de Ionic. Que, por cierto, es de obligatorio conocimiento.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Cómo se usan los menús en Ionic

Pues, en primer lugar, y cómo en todos los tutoriales, vamos a ver un ejemplo de código y después lo comentamos.

Ejemplo de la parte HTML

<ion-menu side="start" menuId="first">

  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Menú de inicio</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item>Gatos</ion-item>
      <ion-item>Perros</ion-item>
      <ion-item>Pájaros</ion-item>
      <ion-item>Hurones</ion-item>
      <ion-item>Osos</ion-item>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-menu side="start" menuId="custom" class="my-custom-menu">

  <ion-header>
    <ion-toolbar color="tertiary">
      <ion-title>Menú personalizado</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item>Tomates</ion-item>
      <ion-item>Lechugas</ion-item>
      <ion-item>Cebollas</ion-item>
      <ion-item>Calabazas</ion-item>
      <ion-item>Pepinos</ion-item>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-menu side="end" type="push">

  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>Inicio</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item>Ajustes</ion-item>
      <ion-item>Mi cuenta</ion-item>
      <ion-item>Usuarios</ion-item>
      <ion-item>Vídeos</ion-item>
      <ion-item>Publicaciones</ion-item>
    </ion-list>
  </ion-content>

</ion-menu>


<ion-router-outlet main></ion-router-outlet>

Cómo ves, es algo muy sencillito ¿verdad? Pues con esto tendríamos un menú funcional y listo para comenzar a ser usado. Es más, si lo utilizas tal cual en tu app tendrás, dependiendo del que hayas elegido, un sidemenu totalmente funciona. Aclaración: los side menu son los que aparecen desde el lateral de las pantallas.

Nota: Antes no era tan fácil. Había que duplicar código por cada componente que teníamos y más mierdas. Pero ahora es super easy todo ¡eh!

Si te has fijado, tenemos el outlet de la app en la vista que acabamos de ver. Por lo que, cómo podrá intuir, estamos en la vista del app.component.html. Así pues, el menú será común en todas las páginas y no tendremos que duplicarlo en todas cómo sucedía anteriormente.

Sólo quedaría poner en los ion-item el route target y listo. Ya serían funcionales :)

Menu Toggle

Este componente, el Menu Toggle, puede ser usado para crear un botón personalizado que abra o cierre el menú drawer. Veamos el código:

<ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu Content</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-menu-toggle>
      <ion-button>Click to close the menu</ion-button>
    </ion-menu-toggle>
  </ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-menu-toggle>
      <ion-button>Click to open the menu</ion-button>
    </ion-menu-toggle>
  </ion-content>
</div>

Menu Types

Cómo hemos visto en el primer ejemplo de código, tenemos 3 tipos diferentes.

• Overlay:  El de siempre, menú por encima del contenido.
• Reveal: Desplaza el contenido a la derecha.
• Push: Una mezcla de ambas.

Si quieres verlo mejor, puedes volver al ejemplo del primer punto.

Menu Sides

Este campo, nos permite decirle al sistema desde donde queremos que apareza el menú.

Puede ser de izquierda a derecha, o al contrario.

• start: Por defecto, aparece desde la izquierda y arrastra el contenido a la derecha.
• end: Aparece desde la derecha y arrastras el contenido a la izquierda.

Etiqueta de ejemplo:

<ion-menu side="end" contentId="main-content"></ion-menu>

Menús múltiples

Como imaginas, al disponer de los Sides para nuestros menús, la posibilidad de tener uno a la izquierda y otro a la derecha existe.

Veamos un ejemplo:

<ion-menu menuId="first-menu" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menú 1</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">Este es el contenido del primer menú.</ion-content>
</ion-menu>

<ion-menu menuId="second-menu" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menú 2</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">Este es el contenido del segundo menú.</ion-content>
</ion-menu>

<ion-menu side="end" contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menú del lado derecho</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">Este es el contenido del menú del lado derecho.</ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <p>Pulsa el botón para abrir el menú que tu quieras.</p>

    <ion-button expand="block" (click)="openFirstMenu()">Abre el primer menú</ion-button>
    <ion-button expand="block" (click)="openSecondMenu()">Abre el segundo menú</ion-button>
    <ion-button expand="block" (click)="openEndMenu()">Abre el menú de la derecha.</ion-button>
  </ion-content>
</div>

La parte TypeScript del ion-menu

Ahora veamos un poco más de código TS en el que veremos cómo podemos controlar más cositas.

import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'menu-example',
  templateUrl: 'menu-example.html',
  styleUrls: ['./menu-example.css'],
})
export class MenuExample {

constructor(private menu: MenuController) { }

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }

  openEnd() {
    this.menu.open('end');
  }

  openCustom() {
    this.menu.enable(true, 'custom');
    this.menu.open('custom');
  }
}

La verdad que las funciones hablan por sí solas. En realidad, este ejemplo nos permite ver y hacer cosas que salgan de la lógica general. ¿A qué me refiero? A qué el sistema trabaja de manera automática. Al pulsar sobre el botón hamburguesa, si abrirá el menú sin tener que hacer nada.

O, en caso de que tengamos más, que nos permita separar la lógica de cada uno de ellos. Cómo, por ejemplo, un menú en la izquierda y otro en la derecha.

Y, cómo habrás podido intuir, el MenuController que hemos inyectado en el constructor nos permite acceder a la funcionalidad programática que tiene dicho menú. Cómo, por ejemplo, la capacidad de abrir y cerrar el menú sin necesidad del gesto del usuario o acceder a los listeners desde el código TS.

Visto esto ya estamos en disposición de que veamos las propiedades…

Propiedades de los Menu en Ionic

La verdad, que cómo cualquier componente, tiene sus propiedades. Y este no es diferente al resto.

Como siempre, solo hablaremos de las propiedades directas del componente. Las heredadas las dejaremos para cuando toque.

• ContentId
  • Descripción -> La ID del contenido del menú que se ha usado
  • Atributo -> content-id
  • Tipo -> string -> Será la cadena que nosotros le hemos asignado al crearlo en forma de id.
  • Por defecto -> Undefined
• Disabled
  • Descripción -> Si es verdadero, quedará desactivado.
  • Atributo -> disabled
  • Tipo -> Booleano
  • Por defecto -> false
• MaxEdgeStart
  • Descripción -> Es el valor del umbral que nos permite decirle al sistema cuanto arrastre / deslizamiento hace falta para que el menú se abra.
  • Atributo -> max-edge-start
  • Tipo -> number
  • Por defecto -> 50
• MenuID
  • Descripción -> Es el ID cómo tal. Nos permite diferenciar un menú de otro cuando se realiza alguna acción.
  • Atributo -> menu-id
  • Tipo -> string
  • Por defecto -> undefined
• Side
  • Descripción -> Nos permite definir en qué lado de la vista se debe colocar el menú.
  • Atributo -> side
  • Tipo -> Enumerado -> “end” | “start”
  • Por defecto -> “start”
• swipeGesture
  • Descripción -> Nos permite definir si queremos que se abra cuando se hace Swipe en la pantalla desde el lado donde está el menú hacia el lado contrario.
  • Atributo -> swipe-gesture
  • Tipo -> Booleano
  • Por defecto -> true
• Type
  • Descripción -> Será el tipo de menú que queremos que se muestre.
  • Atributo -> type
  • Tipo -> string | undefined -> “overlay” | “revela” | “push”

Bueno, pues estas son los atributos / propiedades que podemos controlar del componente Ionic Menu. Algo, que a priori, parece lógico pero que si no los conocemos cómo es debido puede darnos algún que otro dolor de cabeza.

Ahora vamos a continuar explicando. Y esta vez les toca a los eventos / disparadores, que se ejecutan cuando el usuario realiza alguna acción.

Eventos y listeners de ion-menu

Pues cómo hemos explicado en el párrafo anterior, vamos a ver los eventos que podemos controlar sobre el input del usuario y así darle la lógica que nosotros queremos.

Esto eventos serán asignados sobre el html de la siguiente manera:

<ion-menu side="start" menuId="first" (ionDidClose)=”nuestraFuncion()”>

• ionDidClose -> Emitido cuando ha terminado de cerrarse.
• ionDidOpen -> Se emite cuando el ha terminado de abrirse.
• ionWillClose -> Se emite antes de que el comience a cerrarse.
• ionWillOpen -> Se emite antes de empezar a abrirse.

Pues eso ha sido todo en este apartado, continuemos.

Interfaces

MenuCustomEvent

Aunque no es requerida, puede ser usada en lugar de una interfaz simple cómo "CustomEvent" para tener un tipado más fuerte cuando lo eventos sean emitidos. Tiene esta pinta:

interface MenuCustomEvent<T = any> extends CustomEvent {
  detail: T;
  target: HTMLIonMenuElement;
}

A parte, en lugar de usar la propia clase, puedes extender su funcionalidad y hacerla más robusta aún en caso de que así lo quieras.

Métodos y funciones de los Ionic menús

Seguimos avanzando en el tutorial y ahora les toca el turno a las funciones de la clase. La verdad que tampoco son tantas cómo puedes imaginar. Al tratarse de un contenedor en sí, no tiene gran cosa. Veamos…

• close(animated?: boolean)
  • Cierra el menú que está abierto. En caso de que ya esté cerrado no hace nada y devuelve false.
  • Retorna una promesa que tendremos que controlar con un booleano dentro.
• isActive()
  • Nos permite conocer si un menú está en pantalla, “activo”, o no. Se considera activo cuando se puede abrir y cerrar, lo que significa que está “activo”.
  • Retorna una promesa que tendremos que controlar con un booleano dentro.
• isOpen()
  • Nos permite conocer si está abierto, o no.
  • Retorna una promesa que tendremos que controlar con un booleano dentro.
• open(animated?: boolean)
  • Similar a “close()” pero para abrir el menú. Y en caso de que abierto retorna false.
  • Retorna una promesa que tendremos que controlar con un booleano dentro.
• setOpen(shouldOpen: boolean, animated?: boolean)
  • Con esta función podemos definir de manera explícita el estado. Ya sea abrirlo o cerrarlo.
  • Devuelve una promesa que tendremos que controlar y lleva un booleano consigo para saber si se ha realizado correctamente.
• toggle(animated?: boolean)
  • Fuerza un cambio del menú. Si está abierto intentará cerrarse y al contrario. Si se llama mientras está en trámites de cerrarse o abrirse devolverá false.
  • Reporta una promesa que tenemos que controlar. Lleva dentro de un booleano para saber si se ha realizado correctamente o no.

Bueno, pues hasta aquí llegan las funciones. Ahora vamos a ver cómo podemos tocar los estilos con las variables predefinidas que trae el sistema de menús.

Propiedades CSS de Ionic Menu

Cómo hemos comentado en el párrafo anterior, aquí vemos las propiedades.

• Nombre -> Descripción
• --background -> El fondo
• --height -> La altura
• --max-height -> La altura máxima
• --max-width -> La anchura máxima
• --min-height -> La altura mínima
• --min-width -> El ancho mínimo
• --width -> El ancho

Y el tutorial de Ionic Menu en vídeo, ¡cómo siempre!

Y eso es todo, la verdad que tampoco ha sido algo muy tedioso o largo. Es más, si conoces todos estos detalles, podrás usar el componente cómo si fueras un pro.

Una última cosa que quizás te interesa

Mira, puedes aumentar las descargas de tu app mejorando el logo de tu aplicación...

Vale, Aitor, esto está más que claro ya...

Vale, pues déjame decirte que vas a poder mejorar, y mucho, tu logo con nuestra nueva herramienta. Una inteligencia artificial entrenada con todos los logos de Google Play. No te espoileo más, la presentación aquí.

Ya solo queda despedirme de ti, mi usuario, pero no sin que antes de pases por el círculo aquí si no lo has hecho ya. En el enlace están todos los detalles, créeme que no te arrepentirás.

Pues nos vemos en el siguiente artículo, hasta entonces, que vaya bien :)