¿Qué es Ionic?
Requisitos del curso y presentación del proyecto
¿Qué hay de nuevo en Ionic 4?
¿Qué ha cambiado en Ionic?
Instalación de Ionic y templates básicos
Instalación de Capacitor y uso en Android Studio
Uso de Capacitor y xCode
Sincronizando nuestro proyecto con los emuladores
Componentes básicos de Ionic
El componente Slides
CSS y Custom Properties de los componentes de Ionic
Slides dinámicos
Angular Router e Ionic Storage
Controlar la navegación con Guards
Utilidades de CSS con Ionic
Crear una página de login
Validar inputs del formulario de login
Envío del formulario
Servicio para validar credenciales
Agregar Guards a nuestro login
Crear una página de registro
Navegación entre login y registro
Agregar un menú con el componente Menu
Dar funcionalidad y estilos al menú
Uso de componente Slides y opciones avanzadas
Consumo y manejo de informacion con Ionic
Consumiendo un API para llenar información de nuestros artistas
Página completa con artistas, canciones y álbums
El componente Modal y el Modal Controller
Llenar de contenido el Modal
Componente Footer y funcionalidad del Modal
Construyendo nuestro reproductor
Lógica de nuestro reproductor
RETO: Vista de álbums
Acceso al hardware
Usar la cámara a través de Capacitor
Corrección de errores y afinando detalles
Mejorando nuestra página de Settings con CSS
Página Sports y Angular Maps
Crear la página Sport
RETO: Buscador dinámico en Sports
Llevar nuestra aplicación a producción con Android
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
Aportes 8
Preguntas 0
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!
<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>
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-menu-button></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<!--More code-->
<!----># 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>
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.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.