svelte-switch
SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.
Demo
Installation
npm install svelte-switch
or
yarn add svelte-switch
Usage
<script>
import Switch from "svelte-switch";
let checkedValue = true;
function handleChange(e) {
const { checked } = e.detail;
checkedValue = checked;
}
</script>
<h1>Simple usage</h1>
Switch with default style
<Switch on:change={handleChange} checked={checkedValue} />
<br />
The switch is {checkedValue ? 'on' : 'off'}.
API
Props
| Prop Name | Description | Default Value |
|---|---|---|
| checked | Required field | undefined |
| disabled | false | |
| offColor | "#888" | |
| onColor | "#080" | |
| offHandleColor | "#fff" | |
| onHandleColor | "#fff" | |
| handleDiameter | 0 | |
| boxShadow | null | |
| activeBoxShadow | "0 0 2px 3px #3bf" | |
| height | 28 | |
| width | 56 | |
| id | '' | |
| containerClass | '' |
Slots
| Slot Name | Description | Default Set? |
|---|---|---|
| checkedIcon | Yes | |
| unCheckedIcon | Yes |
Events
| Event Name | Description |
event.detail info |
|---|---|---|
| change | {event: event, checked} |
Examples
Click here to view stories implementation
Credits
Component is reimplementation react-switch. Complete credit goes to author and contributors of react-switch.
License
MIT