Switch

El switch ( "Interruptor" de encendido / apagado). Se utiliza para cambiar rápidamente entre dos estados posibles. Se utilizan comúnmente para estados de "encendido / apagado". Deben proporcionar resultados inmediatos, dando la libertad a los usuarios de controlar sus preferencias según sea necesario. El switch muestra cambios inmediatos, tal cual lo hace un botón de encendido o un interruptor de luz, se debe considerar para utilizar sólo en casos así donde no haya que realizar otra acción antes de ver una modificación, como apretar un botón “guardar”.

Playground

Titulo Switch

Desactivado

Title

Descripción

Label Beta

Status

Tooltip

Deshabilitado

Ruby

app/widgets/widget/switch.erb

    <%= switch_widget switch_key: 'key', 
                                      switch_label: 'Titulo Switch'   ,
                                      switch_status: true  
    %>
                  

Html

    <div class="switch">
      <div className="d-flex align-items-center mb-4">
        
        <label class="cursor-pointer text-truncate m-0" for="look_and_feel">
            <h3 class="text-truncate mr-3 mb-0" data-overflow-tooltip="Titulo Switch">
              Titulo Switch
            </h3>
          </label>
        
      </div>
      <div class="collapse show" data-option="look_and_feel">
        <div class="switch__content">
          
          <div class="custom-control custom-switch p-0">
            <input type="hidden" name="look_and_feel" value="false">
            <input type="checkbox" name="look_and_feel" class="custom-control-input" id="look_and_feel" value="true" >
            <label class="custom-control-label" for="look_and_feel"></label>
          </div>
        </div>
      </div>
    </div>
                  

Groovy

<g:switchComponent
        id=""
        class=""
        
/>
                

lista de parámetros

Groovy

Propiedad	Tipo	Detalle
id	String	Determina el ID dentro del DOM del componente
class	String	Determina el CLASS dentro del DOM del componente
checked	checked	Determina si está habilitado

Ruby

Propiedad	Tipo	Detalle
switch_label	String	Para agregar título al widget
switch_key	String	id del switch
switch_activated	String	Para mostrar si el switch está activado o no
switch_description	Boolean	Para mostrar el icono de información con un popover
switch_tooltip	String	Muestra un tooltip en el switch
switch_status	Boolean	Muestra el texto de Activado o Desactivado

Anatomía

1. Títle [optional]

Título de la acción.

2. Label Text

Alterna entre activado/desactivado.

3. Icon / Tooltip

Acción para cerrar el sweet alert.

4. Toggle button

Se conforma mediante un track/thumb.

Casos de uso:

¿Cuándo usar un switch o un check box?

El switch se utiliza para acciones donde sea necesaria una configurar rápidas, sin lugar a que el usuario dude sobre la acción de activar o desactivar rápidamente.

*El checkbox está destinado para funciones más allá de escoger configuraciones. El checkbox sirve para poder habilitar configuraciones u opciones que requieren que a continuación se presione un botón para guardar dicha configuración, lo que obliga al usuario a asegurarse que lo que marca es lo correcto.

Cuando se requiere que los usuarios elijan entre 2 estados opuestos o una acción inmediata, es mejor utilizar un switch en vez de un checkbox o un radio-button.