Minimal material diseño interruptor de palanca

Vista prévia

Descripción

Se trata de un < a href = "https://wikicss.com/tag/material-design/" > material Design inspirado < a href = "https://wikicss.com/tag/switch/" > conmutador de alternancia creado a partir de la entrada de casilla de verificación normal. Escrito en CSS y un poco de JavaScript.

Funcionamiento

La estructura HTML para el conmutador de alternancia.

<input type="checkbox" class="slide-toggle" id="toggleDemo">
<label for="toggleTwo" class="styled-box norm">

<span class="toggle-demo">


<span class="toggle-selector"><span class="blip"></span></span>

</span>

Click Me
</label>

Los estilos CSS principales para el conmutador de alternancia.

*:focus {

outline: none !important;

border-color: none;

box-shadow: none;
}

.slide-toggle {

position: absolute;

opacity: 0;

cursor: pointer;
}

.slide-toggle + label {

position: relative;

cursor: pointer;

padding: 0;

cursor: pointer;
}

.slide-toggle:hover + label:before { background: lightgray; }

.slide-toggle:focus + label:before { background: initial; }

.slide-toggle:checked + label:before { background: initial; }

.blip, .r-blip {

height: 10px;

width: 10px;

z-index: 100;

position: absolute;

border-radius: 50%;

top: 7px;

left: 5px;

background: rgba(0, 150, 255, 0.5);

transform: scale(0);
}

.blip.blipped, .r-blip.blipped { animation: blipp 500ms ease; }
 @keyframes
 blipp {
to {
 transform: scale(5);
 opacity: .3;
}
}

.toggle {

height: 22px;

width: 22px;

z-index: 100;

position: absolute;

border-radius: 50%;

top: -2px;

left: -2px;

background: #0096ff;
}

.toggle.checked { left: 18px; }

.toggle-selector {

height: 22px;

width: 22px;

z-index: 100;

position: absolute;

border-radius: 50%;

top: -2px;

left: -2px;

background-color: gray;

cursor: pointer;

transition: all 300ms ease;
}

.toggle-selector.sel-inner {

left: 20px;

transition: all 300ms ease;

background-color: #0096ff;
}

.toggle-demo {

content: '';

margin-right: 10px;

display: inline-block;

vertical-align: text-top;

width: 40px;

height: 15px;

border-radius: 8px;

background-color: lightgray;
}

.toggle-demo.sel-outer { background-color: rgba(0, 150, 255, 0.8); }

Los fragmentos de código JavaScript necesarios para alternar el estado del conmutador de alternancia al hacer clic.

/////////////////////////
/////////VARIABLES///////
/////////////////////////
var findBlip;
var blipped;
var slideToggle = document.querySelectorAll('.slide-toggle');

/////////////////////////
/////////FUNCTIONS///////
/////////////////////////

//Adds the 'blip' effect when clicked

//TODO: FIGURE OUT WHY ITS BLIPPING ALL OF THE BLIPS WHEN ITS BLIPPED......WHAT?!
// function handleCheckTwo(e){
//

 findBlip = this.parentElement.querySelectorAll('.blip');
//

 findBlip.forEach(blip => blip.classList.add('blipped'));
//

 setTimeout(function(){
//



 findBlip.forEach(blip => blip.classList.remove('blipped'));
//

 }, 520);
// }

//Applies new position and color based on :checked
function isChecked(){


if(this.checked == true){




findBlip = this.parentElement.querySelector('.blip');




this.parentElement.querySelector('.toggle-demo').classList.add('sel-outer');




this.parentElement.querySelector('.toggle-selector').classList.add('sel-inner');




// setTimeout(function(){




//

 findBlip.classList.remove('blipped');




// }, 520);




console.log('checked');


} else if(this.checked == false){




this.parentElement.querySelector('.toggle-demo').classList.remove('sel-outer');




this.parentElement.querySelector('.toggle-selector').classList.remove('sel-inner');




console.log('unchecked');


}
}

/////////////////////////
//////EVENT LISTENERS////
/////////////////////////
slideToggle.forEach(slide => slide.addEventListener('click', isChecked));
// slideToggle.forEach(slide => slide.addEventListener('click', handleCheckTwo));