ColorPicker
Importimport{ ColorPicker }from"antd"; |
Sourcecomponents/color-picker |
Versionsupported since 5.5.0 |
When To Use
Used when the user needs to make a customized color selection.
Examples
Basic Usage.
Set the component to controlled mode. Will lock the display color if controlled by onChangeComplete.
Renders the default text of the trigger, effective when showText is true. When customizing text, you can use showText as a function to return custom text.
Disabled color alpha.
Triggers for customizing color panels.
Encoding formats, support HEX, HSB, RGB.
Rendering of the free control panel via panelRender.
Ant Design supports three trigger sizes: small, default and large.
If a large or small trigger is desired, set the size property to either large or small respectively. Omit the size property for a trigger with the default size.
Set the color to a single or a gradient color via mode.
Set to disabled state.
Clear Color.
Triggers event for customizing color panels, provide options click and hover.
Set the presets color of the color picker.
API
Common props ref：Common props
This component is available since
antd@5.5.0.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| allowClear | Allow clearing color selected | boolean | false | |
| arrow | Configuration for popup arrow | boolean | { pointAtCenter: boolean } | true | |
| children | Trigger of ColorPicker | React.ReactNode | - | |
| defaultValue | Default value of color | string | Color | - | |
| defaultFormat | Default format of color | rgb | hex | hsb | - | 5.9.0 |
| disabled | Disable ColorPicker | boolean | - | |
| disabledAlpha | Disable Alpha | boolean | - | 5.8.0 |
| disabledFormat | Disable format of color | boolean | - | |
| destroyTooltipOnHide | Whether destroy popover when hidden | boolean | false | 5.7.0 |
| format | Format of color | rgb | hex | hsb | hex | |
| mode | Configure single or gradient color | 'single' | 'gradient' | ('single' | 'gradient')[] | single | 5.20.0 |
| open | Whether to show popup | boolean | - | |
| presets | Preset colors | { label: ReactNode, colors: Array<string | Color>, defaultOpen?: boolean, key?: React.Key }[] | - | defaultOpen: 5.11.0, key: 5.23.0 |
| placement | Placement of popup | The design of the placement parameter is the same as the Tooltips component. | bottomLeft | |
| panelRender | Custom Render Panel | (panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode | - | 5.7.0 |
| showText | Show color text | boolean | (color: Color) => React.ReactNode | - | 5.7.0 |
| size | Setting the trigger size | large | middle | small | middle | 5.7.0 |
| trigger | ColorPicker trigger mode | hover | click | click | |
| value | Value of color | string | Color | - | |
| onChange | Callback when value is changed | (value: Color, css: string) => void | - | |
| onChangeComplete | Called when color pick ends. Will not change the display color when value controlled by onChangeComplete | (value: Color) => void | - | 5.7.0 |
| onFormatChange | Callback when format is changed | (format: 'hex' | 'rgb' | 'hsb') => void | - | |
| onOpenChange | Callback when open is changed | (open: boolean) => void | - | |
| onClear | Called when clear | () => void | - | 5.6.0 |
Color
| Property | Description | Type | Version |
|---|---|---|---|
| toCssString | Convert to CSS support format | () => string | 5.20.0 |
| toHex | Convert to hex format characters, the return type like: 1677ff | () => string | - |
| toHexString | Convert to hex format color string, the return type like: #1677ff | () => string | - |
| toHsb | Convert to hsb object | () => ({ h: number, s: number, b: number, a number }) | - |
| toHsbString | Convert to hsb format color string, the return type like: hsb(215, 91%, 100%) | () => string | - |
| toRgb | Convert to rgb object | () => ({ r: number, g: number, b: number, a number }) | - |
| toRgbString | Convert to rgb format color string, the return type like: rgb(22, 119, 255) | () => string | - |
FAQ
Questions about color assignment
The value of the color selector supports both string color values and selector-generated Color objects. However, since there is a precision error when converting color strings of different formats to each other, it is recommended to use selector-generated Color objects for assignment operations in controlled scenarios, so that the precision problem can be avoided and the values are guaranteed to be accurate and the selector can work as expected.