Color 颜色拾取器 (Library)
Color颜色拾取器是color picker library，基础的class类，用来对任意节点应用颜色选取功能，也是Color Webcomponent的依赖。
简单使用
对任意节点追加ax-color属性即可给该节点增加颜色拾取功能。
- 输出
- HTML
当然使用id+new形式也可以创建颜色拾取功能
- 输出
- HTML
- JS
-
-
-
new ax.Color('#demo0001')
宿主节点
支持将任意节点作为颜色输出目标，如果是input、textarea、ax-input、ax-textarea类型则采用赋值value的方式进行颜色输出；其他节点将直接替代其innerHTML。
- 输出
- HTML
设置初始值
默认初始值为空，即面板的默认颜色是纯红色，可通过参数value设置面板初始值，支持以下颜色格式
- rgb或rgba，例如rgb(0,0,0)或rgba(0,0,0,1)
- hsl或hsla，例如hsl(0,0%,0%)或hsla(0,0%,0%,1)
- hex或hexa，例如#000000或#000000ff
- hwb或hwba，例如hwb(0,0%,0%)或hwba(0,0%,0%,1)
- 输出
- HTML
自动填充值
默认需要通过面板的“确认”按钮才可以对宿主节点进行赋值，如果需要在面板的每一次操作都能自动赋值，则可设置参数output.manual:false。
自动填值模式下，会在初始化时将面板的默认色值（纯红色）进行填充，所以有必要通过参数value设置一个初始值。
- 输出
- HTML
输出值格式
默认填充的值格式为hsla格式，可通过参数output.format指定。支持rgb、rgba、hsl、hsla、hex、hexa、hwb和hwba格式。
- 输出
- HTML
多种面板
支持多种面板类型，可通过参数layout指定，支持以下几个值：
- picker，仅显示颜色拾取器，默认
- palette，仅显示预设面板
- full，同时显示picker和palette面板
- 输出
- HTML
核心参数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | string | "" |
设置面板初始色值，可识别多种颜色格式，并支持透明度通道，例如#ff0000、rgba(0,0,0,0.5), hsl(0,0%,0%)、hwb(0,0%,0%,0.5)等 |
| layout | string | "picker" |
布局结构，可选填full（两栏结构，包含picker和palette），picker（仅显示拾色器），palette（仅显示预设值） |
| classes | string | "" |
给目拾色器容器添加class类，一个多个均可，写法同ax.classes.add |
| popup | object | {} |
窗口气泡示例的参数，同模块Popup的参数 |
画布相参数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| canvas | object | { showLabel: true, showTools: true, width: 370, height: 180, mode: "hsv", hue: 0 } |
画布配置，包括尺寸、色彩空间模式和初始色相值 |
| canvas.showLabel | boolean | true |
是否显示色彩空间的横纵坐标的label名称 |
| canvas.showTools | boolean | true |
是否显示画布的几个工具 |
| canvas.width | number/string | 370 |
画布的宽度，支持3种格式，可填400,400px或40rem，由于手机端宽度有限，该尺寸在手机端竖屏将转为300px显示 |
| canvas.height | number/string | 180 |
画布的高度，格式同width，由于手机端宽度有限，该尺寸在手机端竖屏将转为150px显示 |
| canvas.mode | string | "hsv" |
画布色彩空间模式，默认hsv，可选择hsl |
| canvas.hue | number | 0 |
色彩空间初始色相值，范围0-360，360与0的效果一样，默认为0即纯红 |
输出相关属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| output | object | { alpha: true, mode: "hsl", format: "hsla", child: "", manual: true } |
输出配置，包括透明度通道、显示模式和格式 |
| output.alpha | boolean | true |
是否显示透明度通道 |
| output.mode | string | "hsl" |
默认面板显示哪个类型的值，可选择rgb、hwb、hsl或hex |
| output.format | string | "hsla" |
默认输出值的格式，可选择rgb、rgba、hwb、hwba、hsl、hsla、hex、hexa |
| output.child | string | "" |
填值时的宿主子节点选择器，为空则向宿主填值 |
| output.manual | boolean | true |
是否手动填充值，false将不显示"确定"按钮并自动填值，true则通过"确定"按钮填充值 |
等待函数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| b4Assign | function | null |
等待函数，返回Promise，设置值前执行，支持一个参数即被设置的值 |
| b4Clear | function | null |
等待函数，返回Promise，清除值前执行，无参数 |
| b4Fill | function | null |
等待函数，返回Promise，填充值前执行，支持一个参数被填充的值 |
| b4Restore | function | null |
等待函数，返回Promise，恢复初始值前执行，无参数 |
回调函数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onAssigned | function | null |
监听函数，设置值后执行，支持一个参数即设置值 |
| onCleared | function | null |
监听函数，清空值后执行，无参数 |
| onRestored | function | null |
监听函数，恢复初始值后执行，无参数 |
| onFilled | function | null |
监听函数，填充值后执行，支持一个参数即被填充的文本值 |
| onOutput | function | null |
监听函数，生成面板色值后执行，支持一个参数即生成的色值 |
