Table of Contents
Examples
Basic UsageOn By Default
Custom Styles
JavaScript Usage
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
Basic Usage
<k-toggle>Toggle Me</k-toggle>
On By Default
<k-toggle value="true">Toggle Me</k-toggle>
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>
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>
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.