Elastic gooey toggle switch componente web-jellySwitch
| Autor: | akhil0001 |
|---|---|
| Views Total: | 193 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 12, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
El jellySwitch es un muy bonito, componente de interruptor de palanca de estilo iOS implementado en JavaScript vainilla.
See also:
Funcionamiento
Instalar & descargar.
# NPM $ npm install jelly-switch --save
Importe el componente.
import { JellySwitch } from "jelly-switch" O cargue directamente el código JavaScript desde una red CDN.
<script src ="//unpkg.com/jelly-switch"></script>
La estructura HTML.
<jelly-switch id="example" name="switch"> <p slot="content-right" id="rightContent">On/Off</p> </jelly-switch> <jelly-switch id="example" name="switch"> <p slot="content-left" id="rightContent">On/Off</p> </jelly-switch>
Realizar acciones cuando se cambia el estado.
<jelly-switch id="example" name="switch" onToggle="return captureTheChangeEvent(this,event)"> <p slot="content-right" id="rightContent">On/Off</p> </jelly-switch>
function captureTheChangeEvent(self,event) {
if(self.checked)
{
document.getElementById('rightContent').style.color = 'green';
}
else
{
document.getElementById('rightContent').style.color = 'red';
}
}
