¿Qué es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¿Qué hay de nuevo en Ionic 4?

3

¿Qué ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes básicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides dinámicos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una página de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una página de registro

20

Navegación entre login y registro

21

Agregar un menú con el componente Menu

22

Dar funcionalidad y estilos al menú

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

Página completa con artistas, canciones y álbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de álbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra página de Settings con CSS

35

Página Sports y Angular Maps

36

Crear la página Sport

37

RETO: Buscador dinámico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Agregar un menú con el componente Menu

21/39
Recursos

Aportes 8

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Tenía un problema con el menú, ya que cuando me dirigía a la ruta /menu/home me aparecía en blanco, esto lo solucioné dándole el nombre del contenedor también en el tag ion--split-pane así:

<ion-split-pane contentId="content">
...
</ion-split-pane>

en la versión Ionic 5.4.15, se crean las rutas de los componentes en el archivo menu-routing.module.ts

estaba teniendo problemas con el <ion-split-pane> y lo solucione agregando contentId

<ion-split-pane contentId="content">
  <ion-menu contentId="content" side="end">
  <ion-header>
      <ion-toolbar>
          <ion-title>Menu</ion-title>
          <ion-buttons>
            <ion-button icon-only (click)="closeMenu()">
              <ion-icon name="arrow-back" size="large"></ion-icon>
            </ion-button>
          </ion-buttons>
      </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-item>Home</ion-item>
    <ion-item>settings</ion-item>
  </ion-content>
  </ion-menu>

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

</ion-split-pane>

Tenía error al momento de entrar en el localhost/menu/home resultó ser que desde la version 5 de ionic las rutas se crean en el menu-routing.module.ts y no en el menu.module.ts

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

import { MenuPage } from './menu.page';

const routes: Routes = [
  {
    path: "",
    component: MenuPage,
    children: [
      {
        path: "home",
        loadChildren: () =>
          import("../home/home.module").then(m => m.HomePageModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MenuPageRoutingModule {}

En mi menu.page.html lo que hice fue darle un toque mas bonito agregandole iconos a cada item de la lista de esta manera

      <ion-list>
        <ion-item>
          <ion-icon slot="start" name="home-outline"></ion-icon>
          <label>Home</label>
        </ion-item>
        <ion-item>
          <ion-icon slot="start" name="settings-outline"></ion-icon>
          <label>Settings</label>
        </ion-item>

Agregandole iconos sacados de https://ionicons.com/
Si le echan un vistaso a la api https://ionicframework.com/docs/api/menu
podran ver de lo que estoy hablando!

<h1>Hacer un menu en ionic</h1>

menu.page.html

<ion-split-pane contentId="content" when="md">
    <ion-menu contentId="content" side="end">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menu</ion-title>
                <ion-buttons slot="start">
                    <ion-button icon-only (click)="closeMenu()">
                        <ion-icon name="md-arrow-forward" size="large"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item>Home</ion-item>
                <ion-item>Settings</ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="content" main><ion-router-outlet>
</ion-split-pane>
  • contentId tiene que ser igual al id del router-outlet
  • ion-split-pane es la mejor forma de hacer responsivo para la web ya que el menu se colapsara por default cuando se tenga un tamaño medio

home.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="end">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<!--More code-->

Hacer el metodo de closeMenu() en menu.component

<!----># Poner guards en el menu #

app.routing.module
```typescript
{
    path: "menu",
    loadChildren: "./menu/menu.module#MenuPageModule",
    canActivate: [LoginGuard, IntroGuard]
}

menu.module

{
    path: "",
    component: MenuPage,
    children: [
        {
            path: "home",
            loadChildren: () =>
                import ("../home/home.module").then(m => m.HomePageModule)
        }
    ]
}

Asi aparecera en el url como localhost/menu/home

<h1>Hacer un menu en ionic</h1>

menu.page.html

<ion-split-pane contentId="content" when="md">
    <ion-menu contentId="content" side="end">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menu</ion-title>
                <ion-buttons>
                    <ion-button icon-only (click)="closeMenu()">
                        <ion-icon name="md-arrow-back" size="large"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item>Home</ion-item>
                <ion-item>Settings</ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="content" main><ion-router-outlet>
</ion-split-pane>
  • contentId tiene que ser igual al id del router-outlet
  • ion-split-pane es la mejor forma de hacer responsivo para la web ya que el menu se colapsara por default cuando se tenga un tamaño medio

home.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="end">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

aca el link del repo para el que le interese hoy en dia, solo cambia la visual ya que sale un botón con fondo y que ya no es necesaio eso de _ion-split-pane _ en el html de menu, segun los ejemplos de ionic 6 (o al menos eso creo)

Hola, tengo un problema en la versión 5.4.16, ya que al momento de ir a la ruta http://localhost:8100/menu/home, automáticamente se carga la ruta al /intro o /login, pero no puedo acceder a la vista de menu/home.