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

https://ionicframework.com/docs/api/components/tabs/Tabs/​

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ú

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-Select

[(ngModel)]

Otros componentes

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

Made with Slides.com