@kano/kwc-color-picker

3.0.0-beta.8 • Public • Published

Tile based color picker with customizable palette

  • What is it called?
    • kwc-color-picker
  • What is it made out of?
    • A set of colored tiles that when clicked, provides a selected value
  • What variants are needed?
    • Idle: hover styling is still here, but no selection is possible
    • Tiles: Different sizes and margin between them
  • How does it scale?
    • Tiles size are defined in pixels, and the rowSize defines the total width
  • What style variables are in use?
    • Colors: The list of colors available for selection
    • Outline: Can customize the style of the outline when over a light or dark color
  • Anything to keep in mind?
    • If the display state of the element changes (i.e. it gets hidden/unhidden), you need to call notifyResize, otherwise the element will not properly render.
    • When the selected colour changes, the highlighting only animates if the Web Animations API is supported by the browser. To make the feature work in all browsers, use a polyfill.

Installation

yarn add @kano/kwc-color-picker

Usage

import '@kano/kwc-color-picker/kwc-color-picker.js';

const tpl = html`
    <kwc-color-picker></kwc-color-picker>
`;

API

Development

Clone this repository and install the dependencies with yarn

Serve the demo with

yarn serve

Serve the tests with

yarn serve-test

Readme

Keywords

none

Package Sidebar

Install

npm i @kano/kwc-color-picker

Weekly Downloads

0

Version

3.0.0-beta.8

License

none

Unpacked Size

18.7 kB

Total Files

7

Last publish

Collaborators

  • jielijieli
  • ellenw3lsh
  • camuskano
  • alexfiennes
  • kanocomputing
  • rpazdera
  • jamie_old_plantain