CSS sólo interruptores interactivos de palanca-toggle-switch. CSS

Vista prévia

Descripción

El toggle-switch. CSS transforma el elemento de casilla de verificación normal en interruptores de alternancia interactivos usando CSS/CSS3 puro.

See also:

• 10 mejores bibliotecas de JavaScript y CSS de conmutador de alternancia
• 10 mejor casilla de verificación y bibliotecas de reemplazo de entrada de radio
• 10 mejores plugins de jQuery switch para alternar

Funcionamiento

Instalar & descargar.

# Yarn
$ yarn add toggle-switch-css

# NPM
$ npm install toggle-switch-css --save

Importe la hoja de estilo toggle-switch. CSS en el documento.

<link rel="stylesheet" href="./src/toggle-switch.css">

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

<label class="toggle-switch">

<input type="checkbox" id="toggle-switch-input" class="toggle-switch-input"/>

<label for="toggle-switch-input" class="toggle-switch-label"></label>

Default
</label>

Establezca el conmutador de alternancia en desactivado.

<label class="toggle-switch disabled">

<input type="checkbox" id="toggle-switch-input" class="toggle-switch-input"/>

<label for="toggle-switch-input" class="toggle-switch-label"></label>

Default
</label>

Personalice el conmutador de alternancia reemplazando las variables predeterminadas.

.toggle-switch {

--bar-height: 14px;

--bar-width: 32px;

--bar-color: #eee;


--knob-size: 20px;

--knob-color: #fff;


--switch-offset: calc(var(--knob-size) - var(--bar-height));

--switch-width: calc(var(--bar-width) + var(--switch-offset));


--transition-duration: 200ms;


--switch-transition: all var(--transition-duration) ease-in-out;

--switch-theme-rgb: 26, 115, 232;

--switch-theme-color: rgb(var(--switch-theme-rgb));

--switch-box-shadow: 0 0 var(--switch-offset) #11111180;

--switch-margin: 8px;


box-sizing: border-box;

position: relative;

display: inline-flex;

align-items: center;


min-height: var(--bar-height);

min-width: var(--bar-width);


margin: var(--switch-margin);

user-select: none;
}