1.1.3 • Published 5 years ago
color-palette-picker v1.1.3
color-palette-picker
A flexible color palette picker
Install
npm install color-palette-pickerUsage
// 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 颜色值 |