Interruptor de palanca inspirado en el material e iOS con CSS/SCSS

Vista prévia

Descripción

Un personalizable, agradable limpio, iOS-y Google material de diseño de estilo conmutador de alternancia biblioteca creada con CSS/SCSS puro.

Alternatives:

• 10 mejores bibliotecas de JavaScript y CSS de conmutador de alternancia

Funcionamiento

Importa la hoja de estilo ' Clean-switch. css ' en el documento y estamos listos para ir.

<link href="clean-switch.css" rel="stylesheet">

El código HTML para crear un conmutador de alternancia predeterminado.

<label class="cl-switch">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

Cambie el tamaño predeterminado del conmutador de alternancia.

<h2>Large</h2>
<label class="cl-switch cl-switch-large">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

<h2>X-Large</h2>
<label class="cl-switch cl-switch-xlarge">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

Cambie el tema predeterminado del conmutador de alternancia. Temas incorporados:

• cl-switch-rojo: rojo
• cl-switch-negro: negro
• cl-switch-verde: verde
• cl-switch-naranja: naranja

<label class="cl-switch cl-switch-xlarge cl-switch-red">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

<label class="cl-switch cl-switch-xlarge cl-switch-black">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

<label class="cl-switch cl-switch-xlarge cl-switch-green">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

<label class="cl-switch cl-switch-xlarge cl-switch-orange">

<input type="checkbox" checked>

<span class="switcher"></span>

<span class="label">Toggle Switch</span>
</label>

También puede personalizar el conmutador de alternancia utilizando sus propios estilos CSS.

.your-theme input[type="checkbox"]:checked + .switcher {

background: #222;
 }

.your-theme input[type="checkbox"]:checked + .switcher:before {

background: #333;
}

Crear conmutadores de alternancia de estilo iOS.

<label class="cl-switch ios">

<input type="checkbox">

<span class="switcher"></span>

<span class="label">title</span>
</label>

Registro de cambios

11/23/2018

• agregó estilos iOS

05/31/2018

• agregar estilo deshabilitado