Componentes

UI de Ionic
PGY4121 seccion
Nombre del profesor
[email protected]

2
Objetivos
 Objetivo

• Identificar los componentes asociados a la Interfaz del

Usuario usando el Framework Ionic para dar solución a los
requerimientos del cliente

4
Componentes UI
 Componentes UI

» Las aplicaciones Ionic se componen de bloques en un alto nivel

llamados componentes, que nos permiten construir de forma
rápida una Interfaz de Usuario

» Los componentes UI de Ionic lo podrán encontrar en el

siguiente Enlace:
https://ionicframework.com/docs/components

» Los componentes se trabajan tal como se realiza en HTML,

mediante etiquetas, en el caso de ionic comienzan con ion
seguido del elemento <ion-elemento></ion-elemento>

6
 Componentes UI

» Qué tipos de componentes tenemos

7
 Componentes UI

» Qué tipos de componentes tenemos

Y muchos más que pueden verlos

en la documentación oficial de
Ionic… Pruébalos! 8
Componentes
estructurales
 Componentes Estructurales

» En los componentes estructurales tenemos:

<ion-content [scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
<h1>Main Content</h1>
<div slot="fixed">
<h1>Fixed Content</h1>
</div>
</ion-content>

10
 Componentes Estructurales

» En los componentes estructurales tenemos:

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>My Navigation Bar</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Subheader</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<!-- Tu contenido aquí -->
</ion-content>

11
 Componentes estructurales
» En los componentes estructurales tenemos:

<ion-header>
<!-- Tu Header aquí -->
</ion-header>

<ion-content>
<!-- Tu contenido aquí -->
</ion-content>

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>

12
Componentes
comunes
 Card

» Este es un componente muy usado debido a su versatilidad en

usos y adaptaciones que se puede realizar.

<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content> Keep close to Nature's heart...
and break clear away, once in awhile, and climb
a mountain or spend a week in the woods.
Wash your spirit clean.
</ion-card-content>
</ion-card>

14
 Ion Order

» Es un componente interesante que le permitirá al usuario

reordenar de forma simple una lista (no permanente)

<ion-item>
<ion-label> Item 1 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 2 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>

15
 Ion List

» Componente bastante usado en el desarrollo de aplicaciones y

casi esencial.

<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label> </ion-
item>
<ion-item>
<ion-card>...</ion-card>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>

16
 Ion Toolbar

» Componente bastante usado en el desarrollo de aplicaciones.

<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>

17
 Ion Menu

» Tenemos tambien el menu, muy común entre las aplicaciones

<ion-menu side="start" menuId="first" contentId="main">

<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
18
 Componentes comunes

» Además de los indicados anteriormente, tenemos otros

elementos tales como

19
 Componentes comunes

» Además de los indicados anteriormente, tenemos otros

elementos tales como

20
 Componentes comunes

» Además de los indicados anteriormente, tenemos otros

elementos tales como

21
 Dónde encontrarlos

» Existen muchos más y descubre cómo usarlos indagando en la

documentación oficial de Ionic.

https://ionicframework.com/docs/components

22
Interpolación y
NgModel
 Interpolación

» La interpolación nos permite mostrar los datos desde el .ts a la

visual mediante llaves “{{valor}}”
» Ejemplos:

<p>Esto es un caso de interpolación de {{algunaCadena}}</p>

<img src="{{urlImagen}}">

24
 Interpolación

» En la interpolación se puede colocar expresiones simples o

complejas
» Ejemplos:

{{algunaCadena}}
{{1+1}} // Operaciones Matematicas
{{!valorBoleado}} // Operador Logico (Negación)
{{metodoComponente()}} // Valor calculado por un metodo

25
 Interpolación

» Expresiones Prohibidas
» Ejemplos:

{{valorBoleano=false}}

26
 ngModel

» El ngModel nos permite asociar un objeto de nuestro

Componente a un Input para que adquiera o setee el valor
» Ejemplos:

... HTML
<ion-input type="password" [(ngModel)]="user.password"></ion-
input>
<ion-input type="text" [(ngModel)]="user.usuario"></ion-
input>

... TS
user={
usuario:"",
password:""
}
27