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