https://github.com/thecodejack/svelte-switch
Svelte component for toggle/switch a button
https://github.com/thecodejack/svelte-switch
svelte-components sveltejs toggle-buttons toggle-switches
Last synced: 9 months ago
JSON representation
Svelte component for toggle/switch a button
- Host: GitHub
- URL: https://github.com/thecodejack/svelte-switch
- Owner: thecodejack
- Created: 2020-07-19T15:04:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T17:11:06.000Z (about 1 year ago)
- Last Synced: 2024-10-20T05:10:01.212Z (about 1 year ago)
- Topics: svelte-components, sveltejs, toggle-buttons, toggle-switches
- Language: Svelte
- Homepage: https://svelte-switch.netlify.app/
- Size: 371 KB
- Stars: 27
- Watchers: 2
- Forks: 4
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-switch
[](https://www.npmjs.com/package/svelte-switch)
[](https://www.npmjs.com/package/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](https://svelte-switch.netlify.app/)
[REPL Link](https://svelte.dev/repl/72a37aee9ae24705b7d874def7e1f270)
## Installation
```
npm install svelte-switch
or
yarn add svelte-switch
```
## Usage
```svelte
import Switch from "svelte-switch";
let checkedValue = true;
function handleChange(e) {
const { checked } = e.detail;
checkedValue = checked;
}
Simple usage
Switch with default style
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](https://github.com/thecodejack/svelte-switch/tree/master/stories/views) to view stories implementation
## Credits
Component is reimplementation [react-switch](https://github.com/markusenglund/react-switch). Complete credit goes to author and contributors of [react-switch](https://github.com/markusenglund/react-switch).
## License
MIT