Svelte Toggles Npm Package
Team Goats Svelte Toggles UI Library
We stressed so you could relax!View Demo Site · Report Bug ·
Fully Released
Team GOATS from Holmesglen Svelte Toggle Switches functionality is done for you, no tedious research and bug fixing just for Light & Dark mode!
Basic
Horizon
Rays
Simple
Toggles
Current Toggles
| Name | Import Statement | Description |
|---|---|---|
| Basic | svelte-toggles/src/Basic | Sun Morphs into Crescent Moon |
| Horizon | svelte-toggles/src/Horizon | Sun falls behind Horizon |
| Rays | svelte-toggles/src/Rays | Sun w Rays morphs into Crescent Moon |
| Simple | svelte-toggles/src/Simple | Sun Morphs into Moon |
Get Started
Check your Local Storage for your Light value when the Sun is visible
To install and set up the library, run:
npm i svelte-toggles
Or if you prefer using Yarn:
yarn add svelte-toggles
Usage
Import our Toggle like this (For Example);
import Basic from 'svelte-toggles/src/Basic'
<Basic/>
Properties
[+] size
Change the size of the toggle
Type: String
You can select from; small, medium or large (Default: medium)
Example use below:
<Basic size="small"/>
[+] Fill
Change the Colour of the Toggle according to the State
Type: String
[+] lightFill
Colour of Toggle when Light Value is present
[+] darkFill
Colour of Toggle when NO Light Value is present
You can select from; Any take HEX or RGBA code
Default Light: #24282E | Default Dark: #FACB26
Example use below:
<Basic lightFill="#ff0000" darkFill="#ff03f5"/>
<Basic lightFill="255, 255, 255" darkFill="0, 0, 0"/>
Known Bugs
- Rays Toggle - Double clicking toggle will cause the sun rays to be visible when they may not meant to be. ONLY affects animation
Inspiration
Inspired by the React Toggles library; toggles.dev
Special Thanks
Our Teachers throughout our Diploma; Daniel & Alex
Waqas Ahmad on helping develop the "Rays" SVG Animation
