YSS · 颜色选择器（colorpicker）

选择器： colorpicker · 设计器组件： 颜色选择器 · 按名称： colorpicker#名称 或 #名称
支持库： 组件类库 → 颜色选择器类 · 补全类名： 颜色选择器类（简拼 ysxzq / ysxzql）

形态为紧凑输入框：左侧色块预览 + 中间十六进制文本 + 右侧箭头；点击展开取色弹层。颜色值统一为 #RRGGBB；开启「含透明通道」时为 #AARRGGBB。默认颜色 #007ACC。

弹层内可点击 Hex 文本直接编辑（# + 十六进制；Enter 应用、Esc 取消编辑）。开启「实时预览」时，拖动 SV/色相/透明或提交 Hex 会即时写回并触发「颜色改变」；点「取消」或点外关闭会还原打开面板前的颜色。

专用属性

属性	说明	映射
color / background-color	输入区文字/背景	通用
border-* / border-radius / show-border	外框	边框属性
font-size 等	字体	字体
color / value / current-color	当前颜色	当前颜色 / text
placeholder	无值时占位文案	占位 / tooltip
show-alpha / alpha	是否含透明通道（输出 #AARRGGBB）	含透明通道 / allowCopy
live-preview / realtime / live	拖动取色时即时写回	实时预览 / checked

示例

colorpicker#颜色选择器1 {
    color: #E0E0E0;
    background-color: #2D2D30;
    border-color: #5A5A5A;
    border-radius: 4;
    show-border: true;
    font-size: 13;
    current-color: #007ACC;
    placeholder: 请选择颜色;
    show-alpha: false;
    live-preview: true;
}

代码侧常用 API

颜色选择器1.置颜色("#FF5722")
文本 c = 颜色选择器1.取颜色()
颜色选择器1.当前颜色 = "#007ACC"
颜色选择器1.打开面板()
颜色选择器1.关闭面板()
颜色选择器1.清空()
整数 r = 颜色选择器1.取红()
整数 g = 颜色选择器1.取绿()
整数 b = 颜色选择器1.取蓝()
整数 a = 颜色选择器1.取透明()
整数 argb = 颜色选择器1.取颜色整数()
颜色选择器1.置颜色整数(0xFFFF5722)
颜色选择器1.置颜色分量(255, 87, 34)
颜色选择器1.置颜色分量(0, 122, 204, 128)  // 含透明

函数 颜色选择器1.颜色将改变 (文本 颜色) {
    // 调用 取消() 可拦截本次写入（含置颜色 / 确定 / 实时预览）
    如果 (颜色 == "#000000") {
        取消()
    }
}

函数 颜色选择器1.颜色改变 (文本 当前文本) {
    输出(当前文本)  // 如 "#FF5722" 或 "#80FF5722"
}

函数 颜色选择器1.即将打开面板 () {
    输出("opening")
}

函数 颜色选择器1.面板打开 () {
    输出("opened")
}

函数 颜色选择器1.即将关闭面板 () {
    输出("closing")
}

函数 颜色选择器1.面板关闭 () {
    输出("closed")
}

支持库面板与补全

名称	简拼示例	说明
颜色选择器 / 颜色选择器类	ysxzq / ysxzql	类型与类名补全
置颜色 / 取颜色	zys / qys	方法
当前颜色	dqys	属性
颜色将改变 / 颜色改变	ysjgb / ysgb	事件
打开面板 / 关闭面板	dkmb / gbmb	方法

编辑器补全支持全拼前缀、简拼前缀、双拼前缀（及上表别名）。支持库面板路径：组件类库 → 颜色选择器类。