组件 · 数据录入

ColorPicker 颜色选择

颜色选择器。

入口 @selrux/ui/color-picker · 源码 src/components/color-picker/index.ts · 11 个组件 · 发布状态 preview

使用建议

避免：杜撰未导出色彩空间参数
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456789import {
  ColorPicker,
  ColorPickerAlphaSlider,
  ColorPickerArea,
  ColorPickerEyeDropper,
  ColorPickerFormatToggle,
  ColorPickerHueSlider,
  // …共 12 个导出
} from '@selrux/ui/color-picker';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

点击色块打开面板。

预设色与格式

swatches 预设色板，defaultFormat 指定输出格式；alpha={false} 关闭透明度。

States

禁用与尺寸。

受控与格式

value / onValueChange 受控；format / onFormatChange 受控输出格式；name 表单字段名。

value = #7c3aed，format = hex

组合式面板

ColorPickerTrigger（showValue 显示色值）+ Panel（Area / HueSlider / Input / FormatToggle）+ Swatches（values 预设，或用 ColorPickerSwatch 的 value 逐个声明）。

API

属性覆盖：示例用到 14 / 14 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

ColorPicker

主题化颜色选择器根；无 children 时使用主题化默认面板。

属性	说明	类型	默认值
`size`	视觉尺寸；缺省跟随 ConfigProvider。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	-
`value`	受控颜色字符串（hex / rgb(a) / hsl(a)）。	`string`	-
`defaultValue`	非受控初始颜色。	`string`	-
`onValueChange`	颜色变更；同值不重复回调。	`((value: string) => void)`	-
`format`	受控输出格式。	`"hex" \| "rgb" \| "hsl"`	-
`defaultFormat`	非受控初始格式。	`"hex" \| "rgb" \| "hsl"`	-
`onFormatChange`	格式变更。	`((format: ColorPickerFormat) => void)`	-
`alpha`	是否启用透明度通道；默认 true。	`boolean`	`true`
`disabled`	禁用交互。	`boolean`	-
`swatches`	预设色板；缺省使用内置默认色板，传空数组可隐藏。	`readonly string[]`	-
`name`	表单隐藏字段 name。	`string`	-

另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。

ColorPickerAlphaSlider

主题化透明度滑块。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ColorPickerArea

主题化二维选区。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ColorPickerEyeDropper

主题化屏幕取色。

无自有属性；其余 290 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

ColorPickerFormatToggle

主题化格式切换。

无自有属性；其余 290 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

ColorPickerHueSlider

主题化色相滑块。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ColorPickerInput

主题化颜色文本输入。

无自有属性；其余 307 项原生属性继承自 HTMLAttributes / InputHTMLAttributes。

ColorPickerPanel

主题化默认面板；无 children 时组装主题化子部件（便于 Portal 外挂仍带样式）。

无自有属性；其余 280 项原生属性继承自 HTMLAttributes。

ColorPickerSwatch

主题化色板项。

属性	说明	类型	默认值
`value` *	色板颜色。	`string`	-

另有 289 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

ColorPickerSwatches

主题化色板列表；无 children 时用主题化色块，避免 headless 默认项缺少样式类。

属性	说明	类型	默认值
`values`	色板颜色列表；缺省时读取根 `swatches`。	`readonly string[]`	-

另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。

ColorPickerTrigger

主题化触发器预览。

属性	说明	类型	默认值
`showValue`	是否显示当前格式文本；默认 false。	`boolean`	`false`

另有 290 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。

导出类型：ColorPickerAlphaSliderProps、ColorPickerAreaProps、ColorPickerEyeDropperProps、ColorPickerFormat、ColorPickerFormatToggleProps、ColorPickerHueSliderProps、ColorPickerInputProps、ColorPickerPanelProps、ColorPickerProps、ColorPickerSize、ColorPickerSwatchesProps、ColorPickerSwatchProps、ColorPickerTriggerProps、HsvaColor、RgbaColor

函数与常量

名称	说明	签名 / 类型
`resolveColorPickerSize`	解析 ColorPicker 视觉尺寸：组件 prop → Provider → md。	`(size: ColorPickerSize \| undefined, configured: ControlSize \| undefined) => ColorPickerSize`