mcndt / svelte-awesome-color-picker

svelte-awesome-color-picker

svelte-awesome-color-picker is a highly customizable color picker component library with built in keyboard navigation. It is compatible with form libraries.

Links

• 🌟 Github repository
• 🌴 Npm repository
• 🛫 Documentation

install

npm i -D svelte-awesome-color-picker

Usage

<script>
	import ColorPicker from 'svelte-awesome-color-picker/ColorPicker.svelte';

	let color;
</script>

<ColorPicker bind:color />

Api

props

props	type	Default Value	Usage
isAlpha	boolean	true	The alpha slider is visible. If set to false the alpha value provided by the setColor method will not be changed
isInput	boolean	true	The input button is visible. If set to false the picker will be open by default
isOpen	boolean	false	The picker is open by default and cannot be closed
color	Color	red	The color object that should be bound to
setColor	function		This method should be called to initialize or modify the color value
components	Components		see below

css variables

props	Default Value	Usage
--picker-height	300px	picker & sliders height
--slider-width	30px	sliders width
--picker-width	300px	picker width
--focus-color	red	focus color

components

The color picker can be customized with components. The details and props are detailed below. It is easier to copy the library components and tweak it to your needs.

<script>
	// imports
	const components = {
		input: Input,
		sliderIndicator: SliderIndicator,
		sliderWrapper: SliderWrapper,
		alphaIndicator: SliderIndicator,
		alphaWrapper: SliderWrapper,
		pickerIndicator: PickerIndicator,
		pickerWrapper: PickerWrapper,
		wrapper: Wrapper
	};
</script>

<ColorPicker bind:color {components} />

pickerIndicator

Component representing the picker indicator.

• The component should be positioned with position: absolute;.
• It should also have the css property pointer-events: none;.

Props:

props	Default Value	Usage
pos	{x: number, y: number}	expressed in %
color	Color	the actual color

sliderIndicator & alphaIndicator

Components representing the (hue) slider and alpha indicators.

• It should have the css property pointer-events: none;.

Props:

props	Default Value	Usage
pos	number	expressed in %
color	Color	respectively the Hue color and the actual color

Input

Component representing the button to open the color picker and a hidden input with the hex value selected by the user

Props:

props	Default Value	Usage
button	HTMLElement	this property should be exported from only focusable element of this component
color	Color	the actual color
isOpen	boolean	props that can be toggled on or off to open or close the color picker

pickerWrapper & sliderWrapper & alphaWrapper

Encapsulates the picker, hue slider and alpha slider.

• They should define the css properties width and height.

Props:

props	Default Value	Usage
focused	boolean	whether the element is focused

wrapper

Encapsulates the whole color picker

Props:

props	Default Value	Usage
wrapper	HTMLDivElement	this property should be exported with the top most DOM element
isOpen	boolean	whether toe color picker is open or not
isPopup	boolean	whether the color picker is floating or not