Interruptor Foundation
El interruptor cambia entre los estados "On" y "Off" al hacer clic con el ratón (toque con el dedo):
El interruptor de alternancia usa<div class="switch">para crear.<div>agregue dentro un elemento con un id único<input type="checkbox"> ，
<label>El atributo for del elemento debe coincidir con<input type="checkbox">el id del input:
Ejemplo
<div class="switch">
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
Pruébalo »
Tamaño del interruptor
Use.large, .smallo.tinyla clase para establecer el tamaño del interruptor:
Ejemplo
<div class="switch large">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
Pruébalo »
Interruptor redondeado
Use.radiusy.roundla clase para establecer el interruptor redondeado:
Ejemplo
<div class="switch">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
Pruébalo »
Grupo de interruptores
Se pueden establecer opciones individuales mediante botones de opción (radio).Nota:Tenga en cuenta que el atributo de cada opciónnamedebe ser el mismo (en el ejemplo, "myGroup").
Ejemplo
<div class="switch">
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
Pruébalo »