Svelte Color Picker

Live demo.

Simple color picker made with Svelte

directly inspired from https://github.com/BennyAlex/material-design-inspired-color-picker

## Installation

npm i svelte-material-color-picker

Usage

<script>
    import Picker from 'svelte-material-color-picker';
</script>


<Picker on:colorChanged {margin} {size} {colorsPerRow} {defaultTint} />

Props

Full list of props/bindable variables for this component:

name	default	description
margin	1	Distance between color circles.
size	50	Size of the colors circles.
colorsPerRow	6	Number of color circles per row.
defaultTint	500	Default tint displayed for each colors.
selectedColor	#f44336	The color selected, hex code with hashtag.
mode	palette	The mode of the color picker. button mode will hide after the palette after selecting a color only showing the color circle of the selected color. palette mode with show the palette and highlight the selected color in it.
palette	link palette	The palette used by the picker.

Events

Picker.svelte dispatches the following event:

name	detail	description
colorChanged	{ old:string, new:string }	Triggers when clicking on a color picker.

<Kanban
  on:colorChanged={(e) => alert(`Color changed from ${e.detail.old} to ${e.detail.new}`)}
/>

Dev Mode

git clone https://github.com/V-Py/svelte-material-color-picker
cd svelte-material-color-picker
npm install
npm run dev