SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.
npm install svelte-switch
or
yarn add svelte-switch
<script>importSwitchfrom"svelte-switch";let checkedValue =true;functionhandleChange(e) {const { checked } =e.detail; checkedValue = checked; }</script>
<h1>Simple usage</h1>
Switch with default style
<Switchon:change={handleChange} checked={checkedValue} />
<br />
The switch is {checkedValue?'on':'off'}.
| 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 | '' |
| Slot Name | Description | Default Set? |
|---|---|---|
| checkedIcon | Yes | |
| unCheckedIcon | Yes |
| Event Name | Description | event.detail info |
|---|---|---|
| change | {event: event, checked} |
Click here to view stories implementation
Component is reimplementation react-switch. Complete credit goes to author and contributors of react-switch.
MIT