Saltar al contenido

Checkbox Ionic – De principiante a avanzado

Checkbox Ionic

¿Quieres aprender cómo se usan los Ionic Checkbox en tus apps/webs? O, talvez, lo que necesitas es conocer alguno de sus detalles más avanzados cómo sus listeners o funciones ¿verdad? Si la respuesta es sí a cualquiera de estas preguntas, o preguntas derivadas de ellas, déjame decirte que no estás solo. En su mayoría, los desarrolladores (en los que me incluyo) necesitamos de este tipo de artículos para avanzar en nuestros desarrollos.

Por si no me conoces aún, mi nombre es Aitor Sánchez González y soy desarrollador de software desde el año 2014. Me especializo en apps móviles, y en servicios de back end para estas, y en el artículo de hoy vamos a ver cómo puedes, de una manera sencilla, práctica y con ejemplos, utilizar dicho componente en tus apps móviles hechas con Ionic Framework.

Checkbox Ionic

[newsletter]

 

Checkbox en Ionic, qué son y cómo puedes utilizarlas

Para comenzar, 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 (en Ionic) 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, o propiedades, de los ion checkbox

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.

AtributoTipoDetalles
checkedbooleanSi es verdad, este elemento está seleccionado

 

NgModel e ionChange 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.

Continuamos con un ejemplo 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 de un ion checkbox en Sass / Css

Estas 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 Apple / iOS

PropiedadPor defectoDescripción
$checkbox-ios-background-color-off$list-ios-background-colorEl color de fondo cuando este elemento no está seleccionado
$checkbox-ios-background-color-oncolor($colors-ios, primary)Color de fondo cuando este elemento está seleccionado
$checkbox-ios-icon-size21pxTamaño del icono
$checkbox-ios-icon-border-color-off$list-ios-border-colorColor del borde cuando el elemento no está seleccionado
$checkbox-ios-icon-border-color-on$checkbox-ios-background-color-onColor del borde cuando el elemento está seleccionado
$checkbox-ios-icon-border-width1pxAncho del borde
$checkbox-ios-icon-border-stylesolidEstilo del borde
$checkbox-ios-icon-border-radius50%Radio del borde del checkbox
$checkbox-ios-icon-checkmark-width1pxAncho del borde de la casilla de verificación
$checkbox-ios-icon-checkmark-stylesolidEstilo de la casilla de verificación
$checkbox-ios-icon-checkmark-colorcolor-contrast($colors-ios, $checkbox-ios-background-color-on)Color del icono de la casilla de verificación
$checkbox-ios-disabled-opacity.3Opacidad del checkbox cuando está deshabilitado (disabled)
$checkbox-ios-item-start-margin-top$item-ios-padding-media-topMargen izquierdo del checkbox
$checkbox-ios-item-start-margin-end$item-ios-padding-endMargen derecho del elemento
$checkbox-ios-item-start-margin-bottom$item-ios-padding-media-bottomMargen inferior del componente

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

 

Para Android 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.

PropiedadPor defectoDescripción
$checkbox-md-border-bottom-width1pxAncho del borde inferior
$checkbox-md-border-bottom-stylesolidEstilo del borde inferior
$checkbox-md-border-bottom-color$list-md-border-colorColor del borde inferior
$checkbox-md-disabled-opacity.3Opacidad cuando el componente está deshabilitado
$checkbox-md-icon-background-color-off$list-md-background-colorColor de fondo cuando el Checkbox no está seleccionado
$checkbox-md-icon-background-color-oncolor($colors-md, primary)Color de fondo cuando el checkbox está seleccionado
$checkbox-md-icon-size16pxTamaño del iconoo
$checkbox-md-icon-checkmark-width2pxAncho del icono de la casilla de verificación
$checkbox-md-icon-checkmark-stylesolidEstilo del icono de la casilla de verificación
$checkbox-md-icon-checkmark-colorcolor-contrast($colors-md, $checkbox-md-icon-background-color-on)Color del icono de la casilla de verificación
$checkbox-md-icon-border-width2pxAncho del borde del icono
$checkbox-md-icon-border-stylesolidEstilo del borde del icono
$checkbox-md-icon-border-radius2pxRadio del borde del icono
$checkbox-md-icon-border-color-offdarken($list-md-border-color, 40%)Color del bode del checkbox cuando no está seleccionado
$checkbox-md-icon-border-color-oncolor($colors-md, primary)Color del borde cuando está seleccionado
$checkbox-md-transition-duration280msDuración de la transición de no seleccionado a seleccionado y viceversa
$checkbox-md-transition-easingcubic-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-topMargen superior del elemento de casilla de inicio
$checkbox-md-item-start-margin-end36pxMargen al final del elemento de casilla de inicio
$checkbox-md-item-start-margin-bottom$item-md-padding-media-bottomMargen inferior del elemento de la casilla de inicio
$checkbox-md-item-start-margin-start4pxMargen de inicio de la casilla de verificación de inicio
$checkbox-md-item-end-margin-top11pxMargen en la parte superior del casillero final
$checkbox-md-item-end-margin-end10pxMargen al final del elemento de la casilla de verificación final
$checkbox-md-item-end-margin-bottom10pxMargen inferior de la casilla de verificación final
$checkbox-md-item-end-margin-start0Margen de inicio de la casilla de verificación final

 

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, deberíamos tener una clase que incluya un parámetro que sea booleano. Vamos a poner el ejemplo de un usuario que debe 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, debéis 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 incluido 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

Bien, al igual que cualquier otro componente, los checkbox pueden incluirse dentro de una alert cuando lo estás construyendo. Aquí tienes el artículo donde explico, también de manera clara y con ejemplo, cómo puedes hacer uso de este otro componente y meter tus checkbox dentro de una ventana modal.

 

Más contenido del curso:

 

Y el tutorial en video para los más perezosos

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.