ColorPicker
ColorPicker
Widget for selecting the color.
jsx
import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker />;
ColorPickerProps
& {...}Name | Type | Description |
---|---|---|
value | string | null | Selected color item. Should be used with `onChange` property together |
onChange | (value: string, event: React.ChangeEvent) => void | Fired when user selects color item. Should be used with `value` property together |
defaultValue | string | null | Default value if `value` property is not provided |
colors | string[] | Array of color items. Should be used with `onColorsChange` property together |
onColorsChange | (value: string[], event: React.ChangeEvent) => void | Fired when user changes color items. Should be used with `colors` property together |
displayLabel | boolean | Shows label `A` as text color icon inside all color items |
ColorPicker.Trigger
The wrap over the <Dropdown.Trigger/>
component.
jsx
import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Trigger />;
ColorPicker.Popper
The wrap over the <Dropdown.Popper/>
component.
jsx
import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Popper />;
ColorPicker.Colors
Group of ColorPicker.Items.
jsx
import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Colors />;
ColorsProps
& {...}Name | Type | Description |
---|---|---|
colors | Array<string | null> | Array of color items |
ColorPicker.Item
One unit of <ColorPicker.Colors />
. ColorPicker.Item is a swatch preview that allows a user to see what color is currently selected.
jsx
import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Item />;
ItemProps
& {...}Name | Type | Description |
---|---|---|
value | string | null | Color item in hexadecimal format. |
displayLabel | boolean | Shows label `A` as text color icon inside all color items |
editable | boolean | Property enabling the ability to remove a color item on click |
selected | boolean | Shows if color item is selected |
onRemove | React.MouseEventHandler | Fired with color item when user clicks on the close icon |
PaletteManager
Part of ColorPicker that provides the ability to add and remove custom colors to the palette.
jsx
import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager />;
PaletteManagerProps
& {...}Name | Type | Description |
---|---|---|
colors | string[] | Array of color items. Should be used with `onColorsChange` property together |
defaultColors | string[] | Default value if `colors` property is not provided |
onColorsChange | (value: string[], event: React.ChangeEvent) => void | Fired when user adds or removes color items. Should be used with `colors` property together |
PaletteManager.Colors
Group of PaletteManager.Items.
jsx
import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager.Colors />;
ColorsCustomProps
& & {...}Name | Type | Description |
---|---|---|
onPlusButtonClick | React.MouseEventHandler | Fired when user clicks on the plus icon in Palette Manager - focuses the input component |
PaletteManager.Item
One unit of <PaletteManager.Colors />
. PaletteManager.Item is a swatch preview that allows a user to see what color is currently selected.
jsx
import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager.Item />;
ItemProps
& {...}Name | Type | Description |
---|---|---|
value | string | null | Color item in hexadecimal format. |
displayLabel | boolean | Shows label `A` as text color icon inside all color items |
editable | boolean | Property enabling the ability to remove a color item on click |
selected | boolean | Shows if color item is selected |
onRemove | React.MouseEventHandler | Fired with color item when user clicks on the close icon |
ColorPicker.InputColor
Input for adding colors in hexadecimal format.
jsx
import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager.InputColor />;
InputColorProps
& {...}Name | Type | Description |
---|---|---|
value | string | Text value of input |
defaultValue | string | null | Default value if `value` property is not provided |
state | "normal" | "valid" | "invalid" | Uncontrolled visual state of input |
colors | string[] | Array of color items |
onAdd | (value: string, event: React.MouseEvent | React.KeyboardEvent) => void | Fired with entered value when user clicks on the check icon or hits `Enter` or `Space` |