¿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

Dar funcionalidad y estilos al menú

22/39
Recursos

Aportes 8

Preguntas 5

Ordenar por:

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

Hasta ahora sin problemas.

Muy buena explicación toda la información la he podido aplicar en un proyecto personal-

La verdad me sirvieron de mucho estos 2 vídeos sobre como crear un menu.

En la versión 5 de Ionic la nomenclatura de los iconos cambia. Aquí se pueden ver los nuevos nombres:
https://ionic.io/ionicons

A mi cuando agrego <ion-buttons slot="start"> desaparece el icono de la flecha. ¿Alguien sabe porqué?

aqui el link del repo al commit de esta clase, al menos lo unico que cambia hoy en dia es la nomenclatura de los iconos en ionic

No entiendo porque me sale estas notificación en el navegador.

common.js:290 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ common.js:290
checkAvailability @ common.js:146
callCordovaPlugin @ common.js:232
(anonymous) @ common.js:315
cordova @ cordova.js:3
push../node_modules/@ionic-native/status-bar/ngx/index.js.StatusBar.styleDefault @ index.js:28
(anonymous) @ app.component.ts:23
invoke @ zone-evergreen.js:359
onInvoke @ core.js:34201
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
common.js:290 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ common.js:290
checkAvailability @ common.js:146
callCordovaPlugin @ common.js:232
(anonymous) @ common.js:315
cordova @ cordova.js:3
push../node_modules/@ionic-native/splash-screen/ngx/index.js.SplashScreen.hide @ index.js:28
(anonymous) @ app.component.ts:24
invoke @ zone-evergreen.js:359
onInvoke @ core.js:34201
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
ion-split-pane-md.entry.js:46 [DEPRECATED][ion-split-pane] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-split-pane>
    ...
    <div main>...</div>
  </ion-split-pane>

AFTER:
  <ion-split-pane contentId="main-content">
    ...
    <div id="main-content">...</div>
  </ion-split-pane>

Disculpen, talvez es la discrepancia de versiones que se usan, pero con el código que se comparte en Archivos y enlaces no anda la funcionalidad del menu, falta en menu.page.html
agregarle al tag <ion-split-pane>

lo siguiente: contentId=“content”

<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-outline" 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"></ion-router-outlet> </ion-split-pane>