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

Methods

CSS Variables

Properties