颜色 控件 可视化代码生成平台 · 基础输入控件

农哥

颜色 控件

可视化代码生成平台 · 基础输入控件（5/14）

用途：录入颜色值——主题色、标签色、分类标识色、状态配色等界面展示用色。
存储：char(7)，形如 #1e3a8a。
列表/搜索：列表显示色块 + 色值；不参与搜索。

控件解析（外观 · 行为交互 · 样式 · 数据）

维度	说明
外观	色块预览 + HEX 文本框；部分浏览器自带原生取色器。
行为交互	点击色块打开系统取色器；也接受手填 HEX；非法值回填默认色。
样式	展示用圆角色块；可设默认色、是否允许透明度。
数据	char(7) 如 #RRGGBB；存十六进制串；不搜索；列表以色块渲染。

属性面板（右侧）功能详解

分组	字段	说明
基础	字段名 / 标签 / 提示 / 必填 / 默认值	默认值可为十六进制色值或留空。
显示	进列表 / 排序权重	建议进列表（色块直观）；一般不勾可搜索。
校验	格式校验	保存时校验为合法 #RRGGBB。
专属	默认色值	取色器初始颜色。
专属	允许空	否=必须选色；是=可不选（显示透明/灰）。
高级	启用 / 停用	停用仅隐藏，不删列不丢数据。

演示

分类标识色

#1e3a8a

字段名: color | 控件: color | 默认: #2563eb | 允许空: 否

技巧：做"标签/分类配色"时，列表内用色块比文字更直观；前台渲染直接用存储的色值作为 CSS 背景/文字色即可。

颜色 控件文档 · 随工具迭代更新

墨辞

希望后续可以优化部分细节，继续保持免费分享的模式😎