Svelte Color
Color pickers for svelte
Install
npm install svelte-color
Use
<!-- my-component.svelte --> <!-- you can also bind specific props like bind:r={red} bind:h={hue}-->
API
Prop / Method | Type | Default / Args | Description |
---|---|---|---|
class | string | "" | class(es) to add to the root element |
startColor | string | object | red |
disableAlpha | boolean | false | show or not alpha picker and alpha inputs |
bind:color | object | see in the usage seccion | |
bind:r,g,b | number 0-255 | red, green, blue | |
bind:h | number 0-359 | hue | |
bind:s,l,v,a | number 0-1 | saturation, lightness, value, alpha | |
setColor(color) | method | color: string or object | color: any color tinycolor2 accepts |
on:input | event | event.detail = color | Any time user changes value, see detail in the usage seccion |
License
MIT
Contribute
git clone https://github.com/ramiroaisen/svelte-color.git npm install -Dnpm run dev
Opens a dev server with the docs github page showing the components
Enjoy!