JSPM

color-palette-picker

1.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 16
  • Score
    100M100P100Q42494F
  • License MIT

A flexible color palette picker

Package Exports

  • color-palette-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-palette-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

color-palette-picker

A flexible color palette picker

Live demo and usage

Install

npm install color-palette-picker

Usage

// es5 import
import ColorPalettePicker from 'color-palette-picker';

// or by script
<script src="path/to/color-palette-picker.js"></script>
// instantiation
const instance = new ColorPalettePicker(options);

// create panel element and bar element of palette
const panel = instance.create('panel');
const bar = instance.create('bar');

// append element to body
document.body.appendChild(panel);
document.body.appendChild(bar);

Options

Name Type Default Description
hsl Object {h:0, s:100, l:50} 初始设置的颜色值,当前只支持 hsl 色彩模式的值
panelName String panel-range panel 元素的类名
panelWidth Number 300 panel 元素的宽度
panelHeight Number 185 panel 元素的高度
panelPointRadius Number 6 panel 元素中选色滑块的半径
barName String bar-range bar 元素的类名
barWidth Number 200 bar 元素的宽度
barHeight Number 20 bar 元素的高度
barHorizontal Boolean true bar 元素是否在水平方向上拖动滑块进行选色
colorRange Function - 钩子函数,拖动滑块进行选色时执行,提供一个 hsl 对象作为回调参数

Methods

Name Params Description
create 'panel' / 'bar' 生成 panel 或者 bar 元素
destory - 销毁实例以及元素节点
get - 获取当前调色板选中的 hsl 颜色
set {h, s, l} 设置 hsl 颜色值