ColorPicker颜色选择器
ColorPicker
颜色选择器
用于选择颜色。
使用import { ColorPicker } from "antd"; |
版本自 5.5.0 起支持 |
何时使用
当用户需要自定义颜色选择的时候使用。
代码演示
最简单的使用方法。
通过 value 和 onChange 设置组件为受控模式，如果通过 onChangeComplete 受控则会锁定展示颜色。
#1677FF
Custom Text (#1677ff)
渲染触发器的默认文本, showText 为 true 时生效。自定义文本时，可以使用 showText 为函数的方式，返回自定义的文本。
禁用颜色透明度。
自定义颜色面板的触发器。
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)
编码格式，支持HEX、HSB、RGB。
Add title:
Horizontal layout:
通过 panelRender 自由控制面板的渲染。
#1677FF
#1677FF
#1677FF
触发器有大、中、小三种尺寸。
通过设置 size 为 large small 分别把触发器设为大、小尺寸。若不设置 size，则尺寸默认为中。
rgb(16,142,233) 0%rgb(135,208,104) 100%
rgb(16,142,233) 0%rgb(135,208,104) 100%
通过 mode 设置颜色为单一颜色还是渐变色。
5.20.0
#1677FF
设置为禁用状态。
清除已选择的颜色。
自定义颜色面板的触发事件，提供 click 和 hover 两个选项。
设置颜色选择器的预设颜色。
API
通用属性参考：通用属性
自
antd@5.5.0版本开始提供该组件。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowClear | 允许清除选择的颜色 | boolean | false | |
| arrow | 配置弹出的箭头 | boolean | { pointAtCenter: boolean } | true | |
| children | 颜色选择器的触发器 | React.ReactNode | - | |
| defaultValue | 颜色默认的值 | string | Color | - | |
| defaultFormat | 颜色格式默认的值 | rgb | hex | hsb | hex | 5.9.0 |
| disabled | 禁用颜色选择器 | boolean | - | |
| disabledAlpha | 禁用透明度 | boolean | - | 5.8.0 |
| disabledFormat | 禁用选择颜色格式 | boolean | - | |
| 关闭后是否销毁弹窗 | boolean | false | 5.7.0 | |
| destroyOnHidden | 关闭后是否销毁弹窗 | boolean | false | 5.25.0 |
| format | 颜色格式 | rgb | hex | hsb | - | |
| mode | 选择器模式，用于配置单色与渐变 | 'single' | 'gradient' | ('single' | 'gradient')[] | single | 5.20.0 |
| open | 是否显示弹出窗口 | boolean | - | |
| presets | 预设的颜色 | { label: ReactNode, colors: Array<string | Color>, defaultOpen?: boolean, key?: React.Key }[] | - | defaultOpen: 5.11.0, key: 5.23.0 |
| placement | 弹出窗口的位置 | 同 Tooltips 组件的 placement 参数设计 | bottomLeft | |
| panelRender | 自定义渲染面板 | (panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode | - | 5.7.0 |
| showText | 显示颜色文本 | boolean | (color: Color) => React.ReactNode | - | 5.7.0 |
| size | 设置触发器大小 | large | middle | small | middle | 5.7.0 |
| trigger | 颜色选择器的触发模式 | hover | click | click | |
| value | 颜色的值 | string | Color | - | |
| onChange | 颜色变化的回调 | (value: Color, css: string) => void | - | |
| onChangeComplete | 颜色选择完成的回调，通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色 | (value: Color) => void | - | 5.7.0 |
| onFormatChange | 颜色格式变化的回调 | (format: 'hex' | 'rgb' | 'hsb') => void | - | |
| onOpenChange | 当 open 被改变时的回调 | (open: boolean) => void | - | |
| onClear | 清除的回调 | () => void | - | 5.6.0 |
Color
| 参数 | 说明 | 类型 | 版本 |
|---|---|---|---|
| toCssString | 转换成 CSS 支持的格式 | () => string | 5.20.0 |
| toHex | 转换成 hex 格式字符，返回格式如：1677ff | () => string | - |
| toHexString | 转换成 hex 格式颜色字符串，返回格式如：#1677ff | () => string | - |
| toHsb | 转换成 hsb 对象 | () => ({ h: number, s: number, b: number, a number }) | - |
| toHsbString | 转换成 hsb 格式颜色字符串，返回格式如：hsb(215, 91%, 100%) | () => string | - |
| toRgb | 转换成 rgb 对象 | () => ({ r: number, g: number, b: number, a number }) | - |
| toRgbString | 转换成 rgb 格式颜色字符串，返回格式如：rgb(22, 119, 255) | () => string | - |
FAQ
关于颜色赋值的问题
颜色选择器的值同时支持字符串色值和选择器生成的 Color 对象，但由于不同格式的颜色字符串互相转换会有精度误差问题，所以受控场景推荐使用选择器生成的 Color 对象来进行赋值操作，这样可以避免精度问题，保证取值是精准的，选择器也可以按照预期工作。