ColorPicker 颜色选择器 - Docs - Artefact

ColorPicker 颜色选择器

Forms

智能自动检测

简介

一种高级输入控件，允许用户通过饱和度/亮度区域、色相与透明度滑块、可编辑的通道输入框（HEX、RGBA、HSLA）以及预定义色板来选择和自定义颜色。

ColorPicker 组件已作为交互式 colorPicker 区块完整集成到 Page Builder 中，内容作者和开发者可以直接在 CMS 内轻松配置标签、默认状态、Popover 触发器模式以及尺寸刻度。

用法

以下示例展示了内容编辑者如何绑定并结构化颜色选择器组件。

1. 内联自定义器（标准 Hex 默认值）

一个内联颜色选择器，占据页面布局中块级空间，在加载时立即渲染饱和度区域、色相滑块和通道输入框。

{
  "type": "colorPicker",
  "label": "Brand Primary Color",
  "defaultValue": "#7c3aed",
  "interactive": true
}

Brand Primary Color

Hue

262

Alpha

100%

2. 带选中即关闭的 Popover 色板触发器

一种优雅、节省空间的设计方案，渲染一个小型彩色色板触发器。点击色板会在 Popover 层中打开颜色选择面板，在选择预设色板后自动关闭。

{
  "type": "colorPicker",
  "label": "Choose Theme Accent",
  "defaultValue": "#22c55e",
  "trigger": true,
  "closeOnSelect": true,
  "interactive": true
}

Choose Theme Accent

3. 禁用选择器状态

展示一个被锁定或非激活的颜色自定义器。这会禁用所有滑块、输入通道、色板选择按钮和触发器。

{
  "type": "colorPicker",
  "label": "Accent Tint (Inactive)",
  "defaultValue": "#e2e8f0",
  "disabled": true,
  "interactive": true
}

Accent Tint (Inactive)

Hue

214