颜色框

1. 组件概述

颜色框是一个数据输入组件，用于让用户选择颜色值。点击后会弹出拾色器面板，用户可以通过调色盘自由选取颜色，也可以从预设的备选颜色中快速选择。组件支持多种颜色格式输出（如 HEX、RGB、RGBA 等），适用于需要用户自定义颜色的场景，例如主题配色设置、文字颜色选择、背景色配置等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：个性化学习界面配色。在学习辅导类应用中，允许学生自定义界面的主题色或重点标记颜色。使用颜色框让学生选择喜欢的颜色，选中的颜色值存储到绑定变量中，其他展示组件可以引用该变量来动态改变样式。
• 场景二：AI 绘画提示词配置。在创意绘画类应用中，用户需要指定画面的主色调。使用颜色框让用户选择期望的颜色，将颜色值传递给工作流，AI 根据颜色信息生成相应色调的图像。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
绑定变量	组件的变量名，用户选择的颜色值会以此变量名存储。其他组件可以绑定此变量来获取颜色值，调用工作流时此变量的值也会传递给工作流。
标题	显示在颜色框左侧的标签文字，用于说明该输入项的用途，如”主题色”、“背景颜色”。
值格式	选择颜色值的输出格式。可选项包括：HEX（十六进制，如 #FF0000）、HEXA（带透明度的十六进制）、RGB（如 rgb(255, 0, 0)）、RGBA（带透明度的 RGB）、HSL（色相-饱和度-亮度格式）。默认为 HEX 格式，根据实际需要选择合适的格式。
可清除	开启后，颜色框右侧会显示清除按钮，点击可一键清空已选颜色。默认开启。
标题提示	在标题旁边显示一个小问号图标，鼠标悬停时弹出提示内容。适合放置简短的帮助说明，如”请选择您喜欢的主题颜色”。
控件提示	在颜色框旁边显示一个小问号图标，鼠标悬停时弹出提示内容。注意：需要设置控件宽度，否则图标可能换行。
占位提示	颜色框为空时显示的灰色提示文字，引导用户操作，如”点击选择颜色”。
描述	显示在颜色框下方的浅色说明文字，用于补充解释该配置项的用途或填写要求。

拾色器折叠组

配置项	说明
隐藏调色盘	开启后，用户无法通过调色盘自由选取颜色，只能从下方的备选颜色中选择。适用于希望限制用户只能选择特定颜色的场景，例如只允许选择品牌规定的标准色。
备选色	控制拾色器底部的备选颜色列表。默认显示系统预设的 8 种常用颜色。切换为”自定义”后，可以自行添加、删除或修改备选颜色，方便用户快速选择常用颜色。如果清空所有备选色，“隐藏调色盘”选项会自动关闭，以确保用户仍能选择颜色。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。
隐藏	控制组件是否隐藏。与”可见”相反。
禁用	控制组件是否禁用（变灰且不可操作）。
静态展示	开启后，颜色框变为只读的纯文本展示模式，只显示当前颜色值，不可编辑。适用于详情页或确认页面。
隐藏时删除字段	开启后，当该颜色框被隐藏时，其值会从表单数据中删除。适用于条件显示的字段，避免提交无关数据。

校验折叠组

配置项	说明
校验规则	设置颜色框的校验规则，如必填等。当用户未按要求填写时，会显示相应的错误提示。