Checkbox Ionic – De principiante a avanzado

Checkbox Ionic – De principiante a avanzado
5 (100%) 2 vote[s]

En el capítulo de hoy vamos a echarle un ojo a uno de los componentes más utilizados en el desarrollo de aplicaciones y webs. Se trata de los Checkbox Ionic. Vamos a ver como lo podemos implementar, cambiar de color, activarlo o desactivarlo, etc… Este artículo no será demasiado largo por la poca complejidad del componente.

checkbox ionix

Eyyyy! Muy buenas tardes lector/a. ¿Qué tal va pasando el día? Espero que genial. Aquí estoy otra vez, a aburrirte un poquito 🙂 Es más, el lunes es fiesta en Albacete, donde vivo actualmente, y no tengo que ir al trabajo. Así que pasaré más rato por aquí. Intentaré adelantar algunos artículos del curso para que así puedas aprender un poco más de la cuenta este fin de semana.

Bien, pues basta de presentaciones y comencemos.

Checkbox en Ionic, Qué son y cómo puedo utilizarlas

Bueno buenoooo bueno. Este es un componente genérico que viene por defecto incluido en las librerías gráficas de cualquier sistema de desarrollo de software. Por si no lo sabías, es la típica casilla de verificación que utilizamos a diario en mil y una webs o aplicaciones. También cabe mencionar que los checkbox en ionic son los mismo que en Angular. Al fin y al cabo, es el mismo sistema de codificación pero adaptado para aplicaciones / apps móviles.

Su uso es realmente sencillo, no tenemos que importar nada a nuestro archivo app.module.ts como pasa con la mayoría de los componentes. Basta con que usemos sus etiquetas HTML y listo. Ya disponemos de un Checkbox en nuestra aplicación.

Nota importante: Para que un checkbox funcione correctamente siempre tendrá que ir dentro de un «ion-item». Si no el track de eventos del componente no funcionará bien.

 

<ion-item>
  <ion-label>Pepperoni</ion-label>
  <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
</ion-item>

 

Ahí tenemos la construcción. Me gustaría que lo probases en una aplicación tuya, si es que no lo has hecho aún. Te recuerdo, que como mejor se aprende a programar es picando código, no solo leyendo. Yo estoy tremendamente alagado de que esté aquí, conmigo, mano a mano. Pero me gusta mucho más aún que aprendas lo que yo te quiero enseñar. Así que por favor, sigue este consejo y llegarás muy lejos. Si solo te paras o leer y leer nunca terminarás de aprender cómo se hacen las cosas.

Input Properties / Propiedades

Genial, pues llegados hasta aquí solo tengo que decirte que este componente solo tiene una propiedad de entrada. «Checked» y sirve, básicamente, para saber si está activo, o no, el checkbox.

Nota: Recuerdo que estos atributos son propios del componente. Al heredar de componentes padre también heredamos sus atributos. Por esta razón, tienes acceso a muchos más.

Atributo Tipo Detalles
checked boolean Si es verdad, este elemento está seleccionado

Ea, ni más ni menos. Pero veamos más cosillas interesantes de este componente.

Uso avanzado de un Checkbox en Ionic

Antes de continuar, veamos una composición completa y funcional del componente.

 

<ion-item>
  <ion-label>Cucumber</ion-label>
  <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
</ion-item>

 

Ahora pasamos a explicar un poquito:

  • La variable que le hemos asignado en el ngModel cambiará de estado «false» a «true», y viceversa, al seleccionar / checked o deseleccionar / unchecked el elemento.
  • El evento «(ionChange)» se ejecutará cuando el estado del input haya cambiado de valor / value.

Ejemplo / example de código funcional:

 

@Component({
  templateUrl: 'main.html'
})
class SaladPage {
  cucumber: boolean;

  updateCucumber() {
    console.log('Nuevo estado:' + this.cucumber);
  }
}

Esté código imprimirá en la consola el estado en el que está el botón a tiempo real. Hemos tomado como referencia el código HTML anterior.

Y ahora vamos a ver, el que quizás será, el punto más importante de este mini tutorial.

Estilos / Styles de un Checkbox de Ionic en Sass / Css

Estás son las hojas predefinidas que vienen asignadas por defecto a este componente. En ella se engloban colores / colors, formas, iconos / icons, márgenes / margin, paddings, alineación / alignment, etc… todo lo que hace que el componente se vea como se ve…

Para la Manzana

Propiedad Por defecto Descripción
$checkbox-ios-background-color-off $list-ios-background-color El color de fondo cuando este elemento no está seleccionado
$checkbox-ios-background-color-on color($colors-ios, primary) Color de fondo cuando este elemento está seleccionado
$checkbox-ios-icon-size 21px Tamaño del icono
$checkbox-ios-icon-border-color-off $list-ios-border-color Color del borde cuando el elemento no está seleccionado
$checkbox-ios-icon-border-color-on $checkbox-ios-background-color-on Color del borde cuando el elemento está seleccionado
$checkbox-ios-icon-border-width 1px Ancho del borde
$checkbox-ios-icon-border-style solid Estilo del borde
$checkbox-ios-icon-border-radius 50% Radio del borde del checkbox
$checkbox-ios-icon-checkmark-width 1px Ancho del borde de la casilla de verificación
$checkbox-ios-icon-checkmark-style solid Estilo de la casilla de verificación
$checkbox-ios-icon-checkmark-color color-contrast($colors-ios, $checkbox-ios-background-color-on) Color del icono de la casilla de verificación
$checkbox-ios-disabled-opacity .3 Opacidad del checkbox cuando está deshabilitado (disabled)
$checkbox-ios-item-start-margin-top $item-ios-padding-media-top Margen izquierdo del checkbox
$checkbox-ios-item-start-margin-end $item-ios-padding-end Margen derecho del elemento
$checkbox-ios-item-start-margin-bottom $item-ios-padding-media-bottom Margen inferior del componente

Pues más o menos estás son todas las de la manzana.

Para el Androide y aplicaciones web

Por otro lado, las de Android las han excluido en la última versión. Como material design es del propio Google han decidido incluir estás en este sistema operativo. También tengo que decir que son los estilos que utiliza Ionic si compilas aplicaciones para navegador. Aquí las tenéis.

Propiedad Por defecto Descripción
$checkbox-md-border-bottom-width 1px Ancho del borde inferior
$checkbox-md-border-bottom-style solid Estilo del borde inferior
$checkbox-md-border-bottom-color $list-md-border-color Color del borde inferior
$checkbox-md-disabled-opacity .3 Opacidad cuando el componente está deshabilitado
$checkbox-md-icon-background-color-off $list-md-background-color Color de fondo cuando el Checkbox no está seleccionado
$checkbox-md-icon-background-color-on color($colors-md, primary) Color de fondo cuando el checkbox está seleccionado
$checkbox-md-icon-size 16px Tamaño del iconoo
$checkbox-md-icon-checkmark-width 2px Ancho del icono de la casilla de verificación
$checkbox-md-icon-checkmark-style solid Estilo del icono de la casilla de verificación
$checkbox-md-icon-checkmark-color color-contrast($colors-md, $checkbox-md-icon-background-color-on) Color del icono de la casilla de verificación
$checkbox-md-icon-border-width 2px Ancho del borde del icono
$checkbox-md-icon-border-style solid Estilo del borde del icono
$checkbox-md-icon-border-radius 2px Radio del borde del icono
$checkbox-md-icon-border-color-off darken($list-md-border-color, 40%) Color del bode del checkbox cuando no está seleccionado
$checkbox-md-icon-border-color-on color($colors-md, primary) Color del borde cuando está seleccionado
$checkbox-md-transition-duration 280ms Duración de la transición de no seleccionado a seleccionado y viceversa
$checkbox-md-transition-easing cubic-bezier(.4, 0, .2, 1) Transición del elemento cuando pasa de seleccionado a no seleccionado
$checkbox-md-item-start-margin-top $item-md-padding-media-top Margen superior del elemento de casilla de inicio
$checkbox-md-item-start-margin-end 36px Margen al final del elemento de casilla de inicio
$checkbox-md-item-start-margin-bottom $item-md-padding-media-bottom Margen inferior del elemento de la casilla de inicio
$checkbox-md-item-start-margin-start 4px Margen de inicio de la casilla de verificación de inicio
$checkbox-md-item-end-margin-top 11px Margen en la parte superior del casillero final
$checkbox-md-item-end-margin-end 10px Margen al final del elemento de la casilla de verificación final
$checkbox-md-item-end-margin-bottom 10px Margen inferior de la casilla de verificación final
$checkbox-md-item-end-margin-start 0 Margen de inicio de la casilla de verificación final

 

Antes de seguir adelante, me gustaría que sepas que estoy preparando un súper artículo en el que hablaremos de cómo hacer componentes personalizados. En cuanto lo tenga listo lo sabréis si estáis atentos al blog. ¡Será genial!

Ejemplos de código

Ahora vamos a ver unos ejemplos de código que algunos usuarios me han pedido que hable de ellos. ¡Ok, adelante!

Checkbox ionic array

Muchos me habéis solicitado que explique cómo puedo poner «checkbox ionic array» en un proyecto. Pues vamos a verlo.

En primer lugar, tendríamos que tenemos una clase que incluya un parámetro que sea boleano. Vamos a poner el ejemplo de un usuario que tiene que tener un estado «activado» de confirmación por mail. La construcción de la clase os la dejo a vosotros. Vamos a ver lo que nos incumbe que si no esto se hace inmenso.

Por otro lado, tenéis que tener los objetos cargados en memoria (array relleno) para poder interactuar con ella. Y ahora sí, vamos a ver el ejemplo html:

 

<ion-list>
    <ion-item *ngFor="let item of usuario">
         ...
         <ion-label>{{ usuario.nombre }}</ion-label>
         <ion-checkbox color="dark" [(ngModel)]="{{usuario.activo}}"></ion-checkbox>
         ...
    </ion-item>
</ion-list>

¿Habéis visto que sencillo es? Ale, ya tienes a tu disposición un «checkbox ionic array» con el que puedes interactuar. También decir que puedes cambiar el valor de cada uno al estar vinculado / binding a un ngModel, al hacerlo cambiará el valor de ese usuario a tiempo real.

Si quisiéramos darle un valor inicial / default value, solo tendríamos que hacerlo de la siguiente manera:

 

<ion-list>
    <ion-item *ngFor="let item of usuario">
         ...
         <ion-label>{{ usuario.nombre }}</ion-label>
         <ion-checkbox color="dark" [(ngModel)]="{{usuario.activo}}" checked="{{usuario.activo}}"></ion-checkbox>
         ...
    </ion-item>
</ion-list>

 

Si te fijas, hemos includo la propiedad checked en estas líneas. Así cuando el componente se muestre por primera vez en pantalla, en caso de que el valor sea verdadero, se verá checked.

Ionic checkbox alert

Para este caso, me gustaría que te diera un paseo por el blog y buscases la entrada en la que hablamos de los alerts. En ella encontrarás toda la información referente a este tipo de componente. Inclusive la posibilidad de meter un checkbox dentro de uno de ellos. Seguro que lo ves mucho mejor que en esta. Disculpa la molestia de que te haga buscarlo, pero por temas de optimización no puede incluir ese enlace en esta entrada. Lo siento muchísimo 🙁

Y el regalito, como siempre

Si eres de los que le da pereza leer. Aquí te dejo un vídeo en el que podrás ilustrarte si no te ha quedado claro del todo lo que hemos explicado más arriba:

 

Como expliqué al comienzo del artículo, este es un componente que no tiene mucho misterio en su uso. Sí que podríamos ver los eventos a los que lo podemos enganchar y demás. Pero eso irá en otra parte del curso. Donde veremos bien cómo podemos suscribirnos a estos eventos (onClick, onChange, etc…) y poder tratar los datos que nos llegan para poder hacer cosas aún más chulas.

Si tienes cualquier duda, consulta, lo que sea que te pueda ayudar, déjamelo en los comentarios y te contestaré lo antes posible. Quiero que este blog se convierta en un referente del sector en habla hispana. Así que no tengas miedo, te voy a contestar seguro. Lo juro 🙂

Un saludo lector, nos vemos en el siguiente artículo.

Comparte esto en:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *