TECNOLÓGICO NACIONAL DE MÉXICO

INSTITUTO TECNOLÓGICO DE TLAXIACO

DESARROLLO MOVIL

PRACTICA 4:

LISTAS EN IONIC

ALUMNO: CARLOS CHRISTIAN HERNÁNDEZ MATRA

DOCENTE: ING. GUTIÉRREZ OSORNO NOÉ.

INGENIERÍA EN SISTEMAS COMPUTACIONALES

7US

HEROICA CUIDAD DE TLAXIACO OAXACA A 14 DE SEPTIEMBRE

DE 2022
 Índice
INTRODUCCION:............................................................................................................................. 3
OBJETIVO DE PRACTICA ............................................................................................................. 3
MATERIAL UTILIZADO ................................................................................................................... 3
Resultados obtenidos .......................................................................................................................... 4
a. Ejecución de la metodología especificada .............................................................................. 4
b. Código de instrucciones ejecutadas por cada sentencia utilizada .......................................... 5
Paso 1: Modificar el archivo inicio.page.ts .................................................................................. 5
Paso 2: Modificar el archivo inicio.page.html ............................................................................. 7
c. Evidencias descriptivas y síntesis de cada instrucción ejecutada. .......................................... 7
CONCLUSIÓN ....................................................................................................................................... 9
BIBLIOGRAFIA ...................................................................................................................................... 9

Lista de ilustraciones

Ilustración 1 código 1 .................................................................................................................. 4

Ilustración 2 código 2 .................................................................................................................. 5
Ilustración 3 Modificación del archivo inicio.pages.ts ................................................................ 6
Ilustración 4 modificación del archivo inicio.page.HTLM............................................................ 7
Ilustración 5 Pagina inicial. .......................................................................................................... 8
Ilustración 6 Inicio con lista ......................................................................................................... 8
INTRODUCCION:
Los listados son un componente muy utilizado en las aplicaciones ya que son muy
útiles para mostrar... eso es, una lista de elementos Permiten incluir desde texto
hasta otros elementos más avanzados como iconos, imágenes, botones o toggles.
Además, se les puede añadir funcionalidades más avanzadas como edición,
arrastrar para reordenar, arrastrar para mostrar botones de edición o de borrado,
estirar para actualizar, etc.
Para incluir un listado tenemos que usar la directiva <ion-list> y cada elemento del
listado lo incluiremos con <ion-item>. Por ejemplo, para crear un listado con
elementos tipo texto tendríamos que escribir el siguiente código:
<ion-list>
<ion-item>Elemento 1</ion-item>
<ion-item>Elemento 2</ion-item>
...
</ion-list>

OBJETIVO DE PRACTICA
CREAR LISTAS EN LAS PAGINAS CREADAS.

MATERIAL UTILIZADO
• Computadora
• Ionic
• Angular
• Visual Co
 Resultados obtenidos
a. Ejecución de la metodología especificada

En este apartado se muestra toda la modificación del código que se realizó.

Ilustración 1 código 1
Se muestra la otra modificacion en el apartado del codigo.

Ilustración 2 código 2

b. Código de instrucciones ejecutadas por cada sentencia utilizada

Paso 1: Modificar el archivo inicio.page.ts

interface Componente{
icon:string;
name:string;
redirectTo:string;
}
export class InicioPage implements OnInit {
componentes: Componente[]=[
{
 icon:'american-football-outline',
name:'action sheet',
redirectTo:'/action-sheet'
},
{
icon:'logo-apple-appstore',
name:'alert',
redirectTo:'/alert'
}
];
constructor() { }
ngOnInit() {
}
}

Ilustración 3 Modificación del archivo inicio.pages.ts

Paso 2: Modificar el archivo inicio.page.html

<ion-content>

<ion-list>

<ion-item *ngFor="let c of componentes"

[routerLink]="c.redirectTo" class="ion-text-capitalize">

<ion-icon [name]="c.icon" slot="start"></ion-icon>

{{c.name}}

</ion-item>

Ilustración 4 modificación del archivo inicio.page.HTLM

c. Evidencias descriptivas y síntesis de cada instrucción ejecutada.

 se levanta el servicio para poder visualizar los cambios que se realizó, en este caso ya se
muestra la pagina inicial.

Ilustración 5 Pagina inicial.

Ilustración 6 Inicio con lista

CONCLUSIÓN

Durante esta práctica se analizó y se desarrolló todos los pasos

correspondientes que pedía la practica como son las listas en la página
de inicio, la cual nos ayudara mucho en el transcurso del desarrollo de
la página.

BIBLIOGRAFIA

Ionic framework - the cross-platform app development leader. (s/f). Ionic Framework.

Recuperado el 12 de septiembre de 2022, de https://ionicframework.com/

Crea tu primera aplicación en Ionic. (2018, mayo 28). Platzi. https://platzi.com/blog/crea-app-

ionic/