Como, ionic

Cómo Crear un Menú en Ionic con ion-menú

noviembre 4, 2024

Cómo Crear un Menú en Ionic-con-ion-menú, ion-menú-button y ion-split-pane: Guía Completa

Un menú en una aplicación es esencial para la navegación, permitiendo a los usuarios acceder a diferentes secciones de manera intuitiva. Ionic proporciona varios componentes para implementar menús eficientes y adaptables en aplicaciones modernas. Esta guía de cómo crear un menú en Ionic-con-ion-menú, ion-menú-button y ion-split-pane te llevará paso a paso, utilizando:

ion-menu: Contenedor del menú.
ion-menu-button: Botón que abre el menú.
ion-menu-toggle: Elemento que oculta el menú cuando se selecciona.
ion-split-pane: Componente para adaptar el menú según el tamaño de la pantalla.

Requisitos previos

Antes de comenzar, asegúrate de contar con:

Node.js instalado.
Conocimientos básicos de HTML y CSS.
Ionic CLI instalado.

Si ya cumples con estos requisitos, ¡comencemos!

1: Crear un Proyecto en Ionic

Para comenzar, vamos a crear un proyecto básico en Ionic, llamado MiAppDeMenu.

Abre una terminal o línea de comandos en tu computadora.
Escribe el siguiente comando para crear un nuevo proyecto:

   ionic start MiAppDeMenu blank --type=angular

Aquí:

MiAppDeMenu es el nombre de la app.
blank es una plantilla vacía (sin elementos adicionales).
--type=angular establece que estamos usando Angular, un framework muy común con Ionic.

Navega al directorio de la app:

   cd MiAppDeMenu

Inicia la aplicación para ver cómo se ve por defecto:

   ionic serve

Abre un navegador y ve a http://localhost:8100 para ver tu app en funcionamiento.

Nota: Es probable que veas una página en blanco en el navegador. ¡Es normal! Todavía no hemos creado el menú, así que se ve simple.

2: Entendiendo `ion-menu`

El componente ion-menu es el contenedor principal donde vamos a colocar nuestras opciones de navegación (como «Inicio», «Perfil», «Ajustes»). Este menú puede abrirse y cerrarse, y es ideal para organizar las secciones de tu app.

Abre el archivo app.component.html en tu editor de código.
Agrega la estructura básica del ion-menu. Coloca el siguiente código en app.component.html:

   <ion-app>
     <ion-split-pane contentId="main-content">
       <!-- Menú lateral -->
       <ion-menu contentId="main-content" side="start" menuId="main-menu" type="overlay">
         <ion-header>
           <ion-toolbar color="primary">
             <ion-title>Mi Menú</ion-title>
           </ion-toolbar>
         </ion-header>

         <ion-content>
           <ion-list>
             <ion-menu-toggle auto-hide="true">
               <ion-item routerLink="/home">
                 <ion-icon slot="start" name="home"></ion-icon>
                 <ion-label>Inicio</ion-label>
               </ion-item>
             </ion-menu-toggle>

             <ion-menu-toggle auto-hide="true">
               <ion-item routerLink="/profile">
                 <ion-icon slot="start" name="person"></ion-icon>
                 <ion-label>Perfil</ion-label>
               </ion-item>
             </ion-menu-toggle>

             <ion-menu-toggle auto-hide="true">
               <ion-item routerLink="/settings">
                 <ion-icon slot="start" name="settings"></ion-icon>
                 <ion-label>Ajustes</ion-label>
               </ion-item>
             </ion-menu-toggle>
           </ion-list>
         </ion-content>
       </ion-menu>

       <!-- Contenido principal -->
       <ion-router-outlet id="main-content"></ion-router-outlet>
     </ion-split-pane>
   </ion-app>

Explicación del código:

ion-menu: Aquí estamos definiendo el menú lateral. Este es el contenedor principal para nuestras opciones de navegación.
contentId="main-content": Esto conecta el menú con el contenido principal (que tiene el mismo ID). Indica a Ionic qué parte de la pantalla debería desplazarse cuando el menú esté abierto.
side="start": Indica que el menú aparecerá en el lado izquierdo de la pantalla.
menuId="main-menu": Un identificador único para este menú. Útil si quieres tener varios menús en tu app.
type="overlay": El menú se superpone sobre el contenido cuando está abierto.

Nota: El menú incluye ion-item dentro de ion-list, lo que permite crear cada elemento de la lista del menú.

3: Crear Páginas para el Menú

Necesitamos agregar páginas para cada enlace de nuestro menú (Inicio, Perfil, y Ajustes).

Crea una página llamada «Home»:

   ionic generate page home

Crea una página llamada «Profile»:

   ionic generate page profile

Crea una página llamada «Settings»:

   ionic generate page settings

4: Configurar las Rutas

Para que el menú funcione correctamente, debemos configurar las rutas de navegación.

Abre app-routing.module.ts y asegúrate de que las rutas estén configuradas así:

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

   const routes: Routes = [
     { path: '', redirectTo: 'home', pathMatch: 'full' },
     { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
     { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule) },
     { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule) },
   ];

   @NgModule({
     imports: [
       RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
     ],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }

Explicación: Aquí estamos definiendo las rutas para cada página. Ionic utiliza routerLink en los elementos del menú para llevarnos a estas páginas específicas.

5: Agregar un Botón de Menú (`ion-menu-button`

El componente ion-menu-button es el botón que abre el menú. Por lo general, este botón se coloca en la barra de herramientas (toolbar) de la aplicación, para que el usuario lo encuentre fácilmente en la esquina superior izquierda.

Abre el archivo home.page.html (o cualquiera de las páginas que creaste anteriormente).

Agrega el botón de menú en la barra de herramientas. Copia y pega el siguiente código en el archivo home.page.html dentro de <ion-header>:

   <ion-header>
     <ion-toolbar>
       <!-- Botón de menú que abre el menú lateral -->
       <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
       </ion-buttons>
       <ion-title>Inicio</ion-title>
     </ion-toolbar>
   </ion-header>

ion-buttons: Este contenedor organiza varios botones en la barra de herramientas.
slot="start": Hace que el botón se coloque en el lado izquierdo de la barra de herramientas.
ion-menu-button: Este es el componente que actúa como el botón de menú. Cuando el usuario hace clic en este botón, el menú lateral se abrirá automáticamente.

Nota: Puedes repetir este código en profile.page.html y settings.page.html para asegurarte de que el botón de menú esté disponible en todas las páginas.

6: Personalizar el Estilo del Menú con CSS

Ahora vamos a hacer que el menú tenga un diseño visual atractivo con un fondo degradado. Esta personalización hará que el menú se destaque y se vea más profesional.

Abre el archivo global.scss en el directorio src/theme. Este archivo permite que los estilos personalizados afecten a toda la aplicación.

Agrega el siguiente código CSS para aplicar un fondo degradado al menú:

   ion-menu {
     --background: linear-gradient(135deg, #4e54c8, #8f94fb);
     color: white;
   }

   ion-toolbar {
     --background: transparent;
     color: white;
   }

   ion-item {
     --background: rgba(255, 255, 255, 0.1);
     --color: white;
     --ripple-color: rgba(255, 255, 255, 0.2);
   }

   ion-item:hover {
     --background: rgba(255, 255, 255, 0.2);
   }

   ion-icon {
     color: white;
   }

   ion-title {
     color: white;
   }

Explicación del código:

ion-menu: Aquí estamos aplicando un fondo degradado con el ajuste --background. Este degradado va desde un tono morado oscuro a un azul claro.
ion-toolbar y ion-title: Cambiamos el color del texto de la barra de herramientas a blanco para que se vea bien sobre el fondo degradado.
ion-item: Cada elemento de la lista en el menú tiene un fondo ligeramente transparente. Esto crea un efecto de «tarjeta» que es visualmente atractivo.
ion-item:hover: Este efecto agrega un cambio de color suave cuando pasas el cursor sobre cada elemento del menú.

Tip: Puedes personalizar estos colores y estilos como prefieras. Ionic permite un nivel avanzado de personalización en cada componente.

7: Utilizar `ion-menu-toggle` para Optimizar la Experiencia de Usuario

El componente ion-menu-toggle es ideal para cerrar el menú automáticamente cuando se selecciona una opción. Esto es útil para que el usuario pueda enfocarse en la página seleccionada sin necesidad de cerrar el menú manualmente.

Asegúrate de que cada elemento de menú esté envuelto en ion-menu-toggle en app.component.html:

   <ion-list>
     <ion-menu-toggle auto-hide="true">
       <ion-item routerLink="/home">
         <ion-icon slot="start" name="home"></ion-icon>
         <ion-label>Inicio</ion-label>
       </ion-item>
     </ion-menu-toggle>

     <ion-menu-toggle auto-hide="true">
       <ion-item routerLink="/profile">
         <ion-icon slot="start" name="person"></ion-icon>
         <ion-label>Perfil</ion-label>
       </ion-item>
     </ion-menu-toggle>

     <ion-menu-toggle auto-hide="true">
       <ion-item routerLink="/settings">
         <ion-icon slot="start" name="settings"></ion-icon>
         <ion-label>Ajustes</ion-label>
       </ion-item>
     </ion-menu-toggle>
   </ion-list>

auto-hide="true": Esta propiedad hace que el menú se cierre automáticamente al hacer clic en una opción. Muy útil en dispositivos móviles, ya que permite al usuario navegar de forma más cómoda.

8: Adaptar el Menú a Diferentes Tamaños de Pantalla con `ion-split-pane`

ion-split-pane es un contenedor que ajusta el diseño del menú en función del tamaño de la pantalla. En pantallas grandes, el menú estará siempre visible, mientras que en dispositivos móviles aparecerá como un menú deslizable.

Asegúrate de que el código de app.component.html esté dentro de ion-split-pane:

   <ion-split-pane contentId="main-content">
     <ion-menu contentId="main-content" side="start" menuId="main-menu" type="overlay">
       <!-- Contenido del menú -->
     </ion-menu>

     <ion-router-outlet id="main-content"></ion-router-outlet>
   </ion-split-pane>

Explicación de ion-split-pane:

contentId="main-content": Conecta el menú con el contenido principal de la app.
ion-split-pane: Se encarga de que el menú se comporte de forma adaptable:
- En pantallas grandes (como tablets y monitores), el menú estará fijo y visible.
- En pantallas pequeñas (como teléfonos móviles), el menú se convierte en un menú deslizable que aparece cuando el usuario lo solicita.

Tip: Puedes probar el comportamiento del ion-split-pane en el navegador ajustando el tamaño de la ventana. De esta forma, verás cómo el menú cambia entre fijo y deslizable.

9: Probar y Verificar el Menú en Diferentes Dispositivos

Ahora que has construido y estilizado el menú, es importante probarlo en diferentes dispositivos para asegurarte de que funcione bien y se vea bien en todos los tamaños de pantalla.

En el navegador: Ajusta el tamaño de la ventana para simular diferentes tamaños de pantalla. Observa cómo el menú cambia entre fijo y deslizable en función del tamaño.

Con Ionic DevApp o un emulador de dispositivos:

Para probar en un emulador de Android o iOS, utiliza los comandos:
bash ionic cap run android ionic cap run ios
Con estos comandos, podrás ver cómo el menú se comporta en un dispositivo móvil real o emulado.

Verifica la funcionalidad de los componentes:

ion-menu-button: Asegúrate de que el botón abre el menú.
ion-menu-toggle: Haz clic en cada opción del menú y verifica que el menú se cierra automáticamente.
ion-split-pane: Asegúrate de que el menú cambia entre fijo y deslizable en función del tamaño de pantalla.

Resumen de los Componentes Utilizados y Conceptos Clave

ion-menu: Es el componente principal del menú. Lo personalizamos con un fondo degradado.
ion-menu-button: Este botón abre el menú lateral. Lo colocamos en cada página para una experiencia de usuario consistente.
ion-menu-toggle: Envuelve cada elemento del menú para que se cierre automáticamente cuando el usuario hace clic en una opción.
ion-split-pane: Adapta el menú según el tamaño de pantalla, ofreciendo una experiencia optimizada para cada dispositivo.

Conclusión

Crear un menú en Ionic-con-ion-menú no solo mejora la navegación, sino que también ofrece una experiencia de usuario intuitiva y adaptable. A lo largo de esta guía, exploramos cómo implementar ion-menu, ion-menu-button, ion-menu-toggle y ion-split-pane para lograr un diseño funcional y optimizado.

Además, personalizamos el menú con estilos CSS para darle un aspecto profesional, lo que hace que la interfaz sea más atractiva. Pero eso no es todo, porque también probamos el menú en distintos dispositivos, asegurándonos de que se adapte bien tanto a pantallas grandes como a móviles. Si sigues estos pasos, podrás integrar un menú en tu aplicación sin complicaciones. Además, dado que Ionic-con-ion-menú permite una personalización avanzada, puedes modificarlo según las necesidades de tu proyecto. Así que, ¿qué esperas? Pon en práctica lo aprendido y crea una app bien estructurada y fácil de usar.

También puedes ver más Aquí