Color Picker

Simple color-picker custom element

Installation

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","#008751","#AB5236","#5F574F","#C2C3C7","#FFF1E8","#FF004D","#FFA300","#FFEC27","#00E436","#29ADFF","#83769C","#FF77A8","#FFCCAA"]'
></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)
})

Attributes

Methods

CSS Variables

Properties