ColorPicker

Used for color selection.

When to use

Used when the user needs to make a customized color selection.

Examples

Basic Usage

Basic Usage.

controlled mode

Set the component to controlled mode. Will lock the display color if controlled by onChangeComplete.

Rendering Trigger Text

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 Alpha

Disabled color alpha.

Custom Trigger

Triggers for customizing color panels.

Color Format

Encoding formats, support HEX, HSB, RGB.

Custom Render Panel

Rendering of the free control panel via panelRender.

Trigger size

Ceebee UI 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.

Line Gradient

Set the color to a single or a gradient color via mode.

Disable

Set to disabled state.

Clear Color

Clear Color.

Custom Trigger Event

Triggers event for customizing color panels, provide options click and hover.

Preset Colors

Set the presets color of the color picker.

Custom semantic dom styling

You can customize the semantic dom style of ColorPicker by passing objects/functions through classNames and styles.

API

ColorPicker are exported from @ceebee/ui/client.

ColorPicker

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`	`-`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`defaultValue`	Default value of color	`ColorType`	`-`	—
`defaultFormat`	Default format of color	`rgb \| hex \| hsb`	`hex`	5.9.0
`disabled`	Disable ColorPicker	`boolean`	`-`	—
`disabledAlpha`	Disable Alpha	`boolean`	`-`	5.8.0
`disabledFormat`	Disable format of color	`boolean`	`-`	5.22.0
`destroyTooltipOnHide`	Whether destroy dom when close	`boolean`	`false`	5.7.0
`destroyOnHidden`	Whether destroy dom when close	`boolean`	`false`	5.25.0
`format`	Format of color	`rgb \| hex \| hsb`	`-`	—
`mode`	Configure single or gradient color	`'single' \| 'gradient' \| ('single' \| 'gradient')[]`	`single`	5.20.0
`open`	Whether to show popup	`boolean`	`-`	—
`presets`	Preset colors	`PresetColorType`	`-`	—
`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 \| medium \| small`	`medium`	5.7.0
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`trigger`	ColorPicker trigger mode	`hover \| click`	`click`	—
`value`	Value of color	`ColorType`	`-`	—
`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	Default	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`	`-`	—