En muchas ocasiones las opciones para que escojan el usuario son dos, y una de las formas más eficientes de hacer que el usuario escoja una de ellas es por medio de los toggles.

Los toggles en Ionic cuentan con sus propias clases y animaciones como vamos a ver a lo largo de esta entrada.

Usando toggles en Ionic

 Los toggles en Ionic se implementan utilizando dos clases de Ionic.

Primero tenemos que crear una etiqueta label y asignarle la clase toggle, esto nos creará una caja de checkbox, pero para crear nuestro toggle necesitamos usar también la clase track, que añadirá un estilo de fondo a nuestro checkbox, con color cuando este seleccionado. Y la clase handle introduce el botón del circulo.

Esto que parece muy complicado, es en realidad muy sencillo y en el siguiente ejemplo podemos verlo de forma sencilla.

<label class="toggle">
    <input type="checkbox" checked>
    <div class="track">
        <div class="handle"></div>
    </div>
</label>
<label class="toggle">
    <input type="checkbox">
    <div class="track">
        <div class="handle"></div>
    </div>
</label>

Se puede observar como podemos añadir el atributo checked para que la entrada esté activa y en este caso con el color por defecto que queremos añadir, pero como vamos a ver un poco más abajo los colores de activación también podemos cambiarlos fácilmente.

Múltiples toggles

Es bastante común que al desarrollar una aplicación se agrupen diversos elementos del mismo tipo y para controlarlos lo mejor es utilizar listas de elementos.

La clase que se utiliza para introducir múltiples toggles es item-toggle.

En el siguiente ejemplo vamos a ver como se crea una lista de toggles:

<ul class="list">
    <li class="item item-toggle">
        Toggle 1
        <label class="toggle">
             <input type="checkbox" checked>
             <div class="track">
                 <div class="handle"></div>
             </div>
        </label>
    </li>
    <li class="item item-toggle">
        Toggle 2
        <label class="toggle">
            <input type="checkbox">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
     </li>
     <li class="item item-toggle">
         Toggle 3
         <label class="toggle">
              <input type="checkbox" checked>
              <div class="track">
                  <div class="handle"></div>
              </div>
         </label>
     </li>
     <li class="item item-toggle">
         Toggle 4
         <label class="toggle">
             <input type="checkbox">
             <div class="track">
                 <div class="handle"></div>
             </div>
         </label>
     </li>
</ul>

Como vemos si ponemos un texto antes del label el texto aparece a la izquierda de la pantalla.

Colores en lo toggles

Las clases de color que utiliza Ionic se pueden utilizar en los toggles por medio de la clase toggle-[color] aplicado a la etiqueta label.

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

<ul class="list">
    <li class="item item-toggle">
        Toggle 1
        <label class="toggle toggle-light">
             <input type="checkbox" checked>
             <div class="track">
                 <div class="handle"></div>
             </div>
        </label>
    </li>
    <li class="item item-toggle">
        Toggle 2
        <label class="toggle toggle-positive">
            <input type="checkbox" checked>
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
     </li>
     <li class="item item-toggle">
         Toggle 3
         <label class="toggle toggle-dark">
              <input type="checkbox" checked>
              <div class="track">
                  <div class="handle"></div>
              </div>
         </label>
     </li>
     <li class="item item-toggle">
         Toggle 4
         <label class="toggle toggle-asertive">
             <input type="checkbox" checked>
             <div class="track">
                 <div class="handle"></div>
             </div>
         </label>
     </li>
</ul>

Espero que os haya servido y resultado interesante, de ser así por favor, comparte y deja un comentario…