CURSO DE INTRODUCCION AL
CURSO DE INTRODUCCION AL
DESARROLLO DE APLICACIONES MOVILES
DESARROLLO DE APLICACIONES MOVILES
CON IONIC 4 - FRAMEWORK
CON IONIC 5 - FRAMEWORK
1
https://ionicframework.com/docs/api/list
2
Pasos para Implementar el componente
ionic framework: ion-list (menú estilo lista )
1. En primer lugar debemos saber que seguimos
trabajando con la misma aplicación: componentes
y en esta implementación realizaremos la
implementación del componente ion-list en la
pagina inicio de tal forma que se presente como
un menú estilo lista, la idea es agregar los
componentes action-sheet, alert y todos los
componentes que vayamos agregando en las
próximas lecciones del curso de ionic. Les pongo
una captura de lo que deseamos obtener y el link
de un video para ver el funcionamiento.
3
2. Realizaremos algunas operaciones sencillas en la
hoja: inicio.page.html declararemos las etiquetas:
<ion-list>, <ion-ítem> y <ion-label>, utilizaremos el
*ngFor para que nos haga un barrido todos los
elementos dentro de la lista y que iremos agregando.
Y el comando routerLink para establecer la ruta a cada
una de las paginas que serán invocadas con sus
respectivos componentes
Y por ultimo programaremos las etiquetas:
<ion-icon> tiene una propiedad llamada name, que es
el nombre del icono que ustedes quieren utilizar
<ion-label> que contiene una propiedad c.name que
invocara el nombre de la propiedad del icono
declarada en el arreglo componentes que
detallaremos en el siguiente PPT.
Instructor:
Email:
Lic. Manuel Quintana Valiente
manuelquintana.snpp@gmail.com
4
3. Ahora programaremos el archivo:
inicio.page.ts. Lo primero seria crear un
arreglo llamado componentes (11)
luego nos crearíamos una interface(26)
después de la clase, la llamaremos
también componente, y tendrá las tres
propiedades:
icon:
name:
y redirecTo:
5
6