ColorPicker 颜色选择器

用于选择颜色并输出 HEX、RGB、HSV 或 HSL 字符串。

基础用法

禁用状态

尺寸

格式与透明度

预设色

自定义触发器

API

ColorPicker Props

继承自 Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'>

属性名	描述	类型	默认值
children	触发器插槽	ReactNode	-
value	受控颜色值	string	-
defaultValue	默认颜色值	string	-
format	受控输出格式	'hex' | 'rgb' | 'hsv' | 'hsl'	-
defaultFormat	默认输出格式	'hex' | 'rgb' | 'hsv' | 'hsl'	-
onChange	颜色变化时触发	(value: string, meta: { alpha: number; css: string; format: 'hex'; valid: boolean } & { hex: string } | { alpha: number; css: string; format: 'rgb'; valid: boolean } & { b: number; g: number; r: number } | { alpha: number; css: string; format: 'hsv'; valid: boolean } & { h: number; s: number; v: number } | { alpha: number; css: string; format: 'hsl'; valid: boolean } & { h: number; l: number; s: number }) => void	-
onFormatChange	格式变化时触发	(format: 'hex' | 'rgb' | 'hsv' | 'hsl') => void	-
presets	预设色列表	Array<string | { label?: string; value: string }>	-
size	触发器尺寸	'small' | 'medium' | 'large'	-
disabled	禁用状态	boolean	-
placement	浮层位置	Placement	-
offset	浮层偏移	OffsetOptions	-
portalClassName	浮层 Portal 类名	string	-

ColorPicker.Trigger Props

继承自 HTMLAttributes<HTMLElement>

属性名	描述	类型	默认值
children	自定义触发器元素	ReactElement<any, string | JSXElementConstructor<any>>	-