Color Picker

Simple color-picker custom element

Usage

Install the package using npm :

npm install @achtaitaipai/color-picker

Import it in your script

import @achtaitaipai/color-picker

Use the custom element in your html using

<color-picker></color-picker>.

<color-picker confirm-label="Ok" cancel-label="Cancel" pallet='["#ff0000","#1D2B53","#7E2553"]'></color-picker>

Define style

color-picker {
	position: fixed;
	width: 200px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

Open the color-picker with open() and listen change with color-change

const clrpckr = document.querySelector('color-picker')
clrpckr.open()

pckr.addEventListener('color-change', e => {
	console.log(e.detail)
})

Doc

Attributes

| Name | Type | Example | | :-------------: | :------: | :-----------------------: | | pallet | array | "['#ff0000','#1D2B53']" | | confirm-label | string | "Ok" | | cancel-label | string | "Cancel" |

Methods

| Name | Description | | :-----: | :--------------------: | | open | open the color picker | | close | close the color picker |

CSS Variables

| Name | default | description | | :------------: | :-------: | :----------------------------------------: | | --bg | #3f3e3e | background color | | --bg-input | #282828 | background color of text input and buttons | | --font-color | #ffffff | font color | | --bg-error | #7b0000 | background color of text input when error |

Properties

| Name | Type | Example | | :-----: | :----: | :-------: | | value | string | #ff0000 |