svelte-switch


SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.

Demo

Click here for Storybook link

REPL Link

Installation

``
npm install svelte-switch

or

yarn add svelte-switch
`

Usage

`

Simple usage

Switch with default style



The switch is {checkedValue ? 'on' : 'off'}.

`

API

$3

| 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 | | '' |

$3

| Slot Name | Description | Default Set? |
| ------------- | ----------- | ------------ |
| checkedIcon | | Yes |
| unCheckedIcon | | Yes |

$3

| Event Name | Description | event.detail info |
| ---------- | ----------- | ------------------------- |
| change | | {event: event, checked}` |

$3

Click here to view stories implementation

Credits

Component is reimplementation react-switch. Complete credit goes to author and contributors of react-switch.

License

MIT