color-picker

Color picker web component.

This was originally forked from Simonwep/pickr.

See a live demo

• Install
• Example
  • JS
  • HTML
• API
  • Properties
  • Events
  • Keyboard navigation
• Modules
  • ESM
• CSS
  • Import CSS
  • Customize CSS
  • Pre-built JS

Install

npm i -S @substrate-system/color-picker

Example

It registers itself under the name color-picker. Just import, then you can use the tag in HTML. Set swatches to an array of valid CSS color strings, or use the default swatches.

JS

import '@substrate-system/color-picker'

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

picker.swatches = ['#000', '#fff', '#ef4444', '#3b82f6']
picker.value = '#000'

// use the `.on` method for namespaced event
picker.on('change', (ev) => {
    console.log(ev.detail.value)   // selected color string
    console.log(ev.detail.index)   // index into swatches array
    console.log(ev.detail.source)  // 'pointer' | 'keyboard' | 'programmatic'
})

HTML

<color-picker id="picker"></color-picker>

API

Properties

| Property | Type | Description | |------------|-----------------|--------------------------------------| | swatches | string[] | Array of valid CSS color values. | | value | string\|null | The currently selected color string. | | disabled | boolean | Disables all interaction. |

You can also set value via HTML attribute:

<color-picker value="#ef4444"></color-picker>

Events

color-picker:change

Fired when the selected color changes. This is a namespaced event, as described here. You should use the .on method to listen for it:

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

// `.on` will convert the given 'change' event to
// the correct namespaced event name, `color-picker:change`.
picker.on('change', ev => {
  // ...
})

interface ChangeDetail {
    value:string|null
    index:number|null
    source:'pointer'|'keyboard'|'programmatic'
}

Keyboard navigation

When a swatch has focus:

| Key | Action | |---------------------------------|----------------------------| | ArrowRight / ArrowDown | Select next swatch | | ArrowLeft / ArrowUp | Select previous swatch | | Space / Enter | Confirm active swatch |

Modules

This package ships ESM via the package.json exports field.

ESM

import '@substrate-system/color-picker'

Or import the component class:

import { ColorPicker } from '@substrate-system/color-picker'

CSS

Import CSS

import '@substrate-system/color-picker/css'

Or minified:

import '@substrate-system/color-picker/min/css'

Customize CSS

Override styles on the color-picker element:

color-picker .swatch {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

color-picker .swatch[aria-checked='true'] {
    border-color: hotpink;
}

Pre-built JS

Copy the minified bundle to your web server:

cp ./node_modules/@substrate-system/color-picker/dist/index.min.js ./public/picker.min.js

Then reference it in HTML:

<script type="module" src="./picker.min.js"></script>