Toggle

Table of Contents

Basic Usage

<k-toggle>Toggle Me</k-toggle>
Toggle Me

On By Default

<k-toggle value="true">Toggle Me</k-toggle>
Toggle Me

Custom Styles

<k-toggle 
style="
--switch_height: 3rem;
--switch_width: 5rem;
--switch_border: none;
--switch_background__off: var(--c_danger);
--switch_background__on: var(--c_success);
--handle_size__off: 2rem;
--handle_size__on: calc(3rem - 2px);
--handle_border: none;
--handle_background__off: #ddd;
--handle_background__on: white;
"

>
Toggle Me</k-toggle>
Toggle Me

JavaScript Usage

<k-toggle id="tog1">Toggle Me</k-toggle>
<button id="turnOn">Turn On</button>
<button id="turnOff">Turn Off</button>
<button id="toggle">Toggle</button>
<script>
const $tog1 = document.getElementById('tog1');
document.getElementById('turnOn').addEventListener('click', ()=>{
$tog1.on();
});
document.getElementById('turnOff').addEventListener('click', ()=>{
$tog1.off();
});
document.getElementById('toggle').addEventListener('click', ()=>{
$tog1.toggle();
});
</script>
Toggle Me

JavaScript Reference

Constructor

Extends Component
new Toggle()

Requirements

Attributes

value: boolean

A boolean that indicates if the switch is on or off, the default value is false.

This can be set directly, but it is not recommended as it only triggers the a change event and not a on, off or toggle event as the methods do, so the methods are preferrable.

Methods

on(): this

Set's the value to true, dispatches a change and an on event. The switch visual changes to the on state.

off(): this

Set's the value to false, dispatches a change and an off event. The switch visual changes to the off state.

toggle(): this

Negates the value, if it is true it is now set to false, but if it is false it is now set to true. It also dispatches dispatches a change and an on or off event. The switch visual changes to the oposite state.