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
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 颜色值 |