Ionic
Clase 3
Tabs
Propiedades de los tab
Pasar parámetros (Ver desde la documentación)
https://ionicframework.com/docs/api/components/tabs/Tab/
Establecer un Tab como inicial
- Desde HTML con directivas
- Desde Typescript
- Desde otro tab
Configuraciones por plataformas
SASS
Variables SASS
$colors
color($colors, primary)
$miColor
Material Paletts
Sobrescribir variables SASS
https://ionicframework.com/docs/theming/overriding-ionic-variables/
Ionicons
ion-icon name='icon' (icon-left - icon-right)
icon-only
Como se ve en ios y md
IonSegments
ion-segment
[(ngModel)]="variable"
ion-segment-button
value='grupo1'
div
*ngIf='variable == grupo1', *ngIf='variable == grupo...'
https://ionicframework.com/docs/api/components/segment/Segment/
Toolbars
Menú
Componente
https://ionicframework.com/docs/components/#menus
APIs
https://ionicframework.com/docs/api/components/menu/Menu/
https://ionicframework.com/docs/api/components/menu/MenuClose/
https://ionicframework.com/docs/api/components/app/MenuController/
https://ionicframework.com/docs/api/components/menu/MenuToggle/
Ejercicio Login, Menú y Página de Inicio
SearchBar
Listas
ion-list
ion-item
TS ---->
lista: Array<any> = [ {
titulo: '',
id: 1,
descripción: ''
} ]
HTML ---->
*ngFor='let item of lista', {{item.titulo}}
Listas
ion-list-header
ion-item
detail-push
detail-none
text-left
padding
https://ionicframework.com/docs/components/#lists
https://ionicframework.com/docs/api/components/item/Item/
https://www.joshmorony.com/an-introduction-to-lists-in-ionic-2/
Ion-Select
[(ngModel)]
Otros componentes
- Radio - https://ionicframework.com/docs/components/#radio - https://ionicframework.com/docs/api/components/radio/RadioButton/ - https://ionicframework.com/docs/api/components/radio/RadioGroup/
- CheckBox - https://ionicframework.com/docs/components/#checkbox - https://ionicframework.com/docs/api/components/checkbox/Checkbox/
- Toggles - https://ionicframework.com/docs/components/#toggle - https://ionicframework.com/docs/api/components/toggle/Toggle/
Template Driven Forms
HTML
Etiqueta form
#miFormulario = "ngForm" (ngSubmit)="evento()"
Botón tipo submit
Campos de Texto con: [(ngModel)]='objeto.propiedad'
name='propiedad'
Template Driven Forms
TS
objeto = {
propiedad: '', ...
};
O uso las interfaces :)
evento(){
}
o
evento(miFormulario){
console.log(miFormulario.value)
}
Template Driven Forms
Required
Pattern
Para validaciones
Botón [disabled]='!miFormulario.valid'
Crear los formularios para Jornaleros
Data Driven Forms
Data Driven Forms
Form-Builder
HTML
<form [formGroup]="miFormulario" (ngSubmit)="guardarDatos()"></form>
<ion-input formControlName="nombre" type="text" placeholder="Nombre">
</ion-input>
<ion-header>
<ion-navbar color="primary">
<ion-title>Mi Primer Formulario</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form [formGroup]="miFormulario" (ngSubmit)="guardarDatos()">
<ion-list>
<ion-item>
<ion-icon name="person" item-start></ion-icon>
<ion-label stacked>Nombres:</ion-label>
<ion-input formControlName="nombre" type="text" placeholder="Nombre"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="person" item-start></ion-icon>
<ion-label stacked>Apellidos:</ion-label>
<ion-input formControlName="apellido" type="text" placeholder="Apellidos"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="mail" item-start></ion-icon>
<ion-label stacked>Correo electrónico:</ion-label>
<ion-input formControlName="correoElectronico" type="email" placeholder="Email"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="calendar" item-start></ion-icon>
<ion-label stacked>Fecha de nacimiento:</ion-label>
<ion-datetime formControlName="fechaNacimiento" displayFormat="MM-DD-YYYY" placeholder="MM-DD-YYY"></ion-datetime>
</ion-item>
<div formGroupName="repetirContrasena">
<ion-item>
<ion-icon name="eye" item-start></ion-icon>
<ion-label stacked>Contraseña:</ion-label>
<ion-input formControlName="contraseña" type="password" placeholder="Contraseña"></ion-input>
</ion-item>
<ion-item>
<ion-icon name="eye" item-start></ion-icon>
<ion-label stacked>Confirmar contraseña:</ion-label>
<ion-input formControlName="confirmarContrasena" type="password" placeholder="Confirmar contraseña"></ion-input>
</ion-item>
</div>
<ion-row radio-group formControlName="genero">
<ion-col>
<ion-item>
<ion-icon name="woman" item-start></ion-icon>
<ion-label>Mujer</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-icon name="man" item-start></ion-icon>
<ion-label>Hombre</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-list>
<div padding>
<button ion-button block type="submit" [disabled]="!miFormulario.valid">Guardar</button>
</div>
</form>
</ion-content>Data Driven Forms
Form-Builder
TS
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
miFormulario: FormGroup;
constructor(..., public formBuilder: FormBuilder ) {
}
constructor(
public navCtrl: NavController,
public formBuilder: FormBuilder
) {
this.miFormulario = this.crearFormulario();
}
guardarDatos(){
console.log(this.miFormulario.value);
}
private crearFormulario(){
return this.formBuilder.group({
nombre: ['Valor Inicial', Validators.required],
apellido: ['', Validators.required],
correoElectronico: ['', Validators.required],
fechaNacimiento: ['', Validators.required],
repetirContrasena: this.formBuilder.group({
contraseña: ['', Validators.required],
confirmarContrasena: ['', Validators.required]
}),
genero: ['', Validators.required],
});
}Recomendado
Ionic 3
By Yhoan Andres Galeano Urrea
Ionic 3
- 1,085
