Los checkboxs en Ionic cumplen la misma función que los toggles pero con otra presentación, por lo que comprobaremos que su uso es muy similar en todos los aspectos.

Introduciendo checkboxs en ionic

La forma de introducir los checkbox dentro de nuestra aplicaciones pasa por introducir la clase checkbox tanto en el label como en el input, tal y como vemos en el siguiente ejemplo:

<label class="checkbox">
   <input type="checkbox">
</label>
<label class="checkbox">
   <input type="checkbox">
</label>

En la imagen podemos ver dos checkbox, uno desactivado y otro activo por defecto, de hecho podemos cambiar los colores de los mismos.

Introduciendo una lista de checkbox

Ionic nos permite introducir una lista de checkbox según nuestras necesidades para crear formularios más amplios, para ello tan solo hay que utilizar la clase  item-checkbox en cada elemento de la lista:

<ul class="list">
    <li class="item item-checkbox">
       Checbox 1
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
    <li class="item item-checkbox">
       Checkbox 2
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
    <li class="item item-checkbox">
       Checkbox 3
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
    <li class="item item-checkbox">
       Checkbox 4
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
</ul>

Coloreando nuestros checkboxs en Ionic

Esta claro que los checboxs en Ionic, aunque más vistosos que sus hermanos de html, son bastante sosos solo en azul, de modo que podemos darles colores específicos de Ionic por medio de la clase checkbox-[color].

En el siguiente ejemplo vemos como funcionan algunos de estos colores:

<ul class="list">
    <li class="item item-checkbox checkbox-balanced">
       Checkbox 5
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
    <li class="item item-checkbox checkbox-energized">
       Checkbox 6
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
    <li class="item item-checkbox checkbox-assertive">
       Checkbox 7
       <label class="checkbox">
       <input type="checkbox">
       </label>
    </li>
</ul>

De esta forma no solo damos color al relleno, también a checkbox inactivo en sus bordes, dando un resultado mucho más atractivo.

Pero Ionic está implementando angularJS en su núcleo y es posible hoy en día generar los checkbox por medio de etiquetas específicas de Ionic, utilizando y utilizando directivas de AngularJS.

En el siguiente ejemplo vamos a ver como hacer una lista de Ionic con etiqueta ion-list y como crear los checkboxs por medio de ion-checkbox. También vamos a ver como con una clase podemos darle color al check:

<ion-list>
<ion-checkbox class="checkbox-assertive" ng-model="filter.red">Red</ion-checkbox>
<ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
<ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>
</ion-list>

Que nos da como resultado:

Cómo de costumbre espero que os haya servido y que compartáis la publicación si os ha gustado…