Checkbox Ionic – De principiante a avanzado

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.

AtributoTipoDetalles
checkedbooleanSi 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

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

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

 

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 *