ColorPicker

Demos

How to import

import { ColorPicker } from '@fibrous/semi-ui-react';

Basic Use

In portal

import { ColorPicker, Button } from '@fibrous/semi-ui-react';
export default function ColorPickerDemo() {
    return (
        <div>
            <ColorPicker
                alpha
                onChange={(value) => {
                    console.log(value);
                }}
                usePopover
            />
            <br />
            <div>自定义 trigger</div>
            <ColorPicker
                alpha
                onChange={(value) => {
                    console.log(value);
                }}
                usePopover
            >
                <Button> Trigger </Button>
            </ColorPicker>
        </div>
    );
}

Normal display

import { ColorPicker } from '@fibrous/semi-ui-react';
export default function ColorPickerDemo() {
    return (
        <ColorPicker
            alpha
            onChange={(value) => {
                console.log(value);
            }}
        />
    );
}

Eyedropper Color Picker

The eyedropper is enabled by default and supports picking colors from the browser or external software screen. Pass eyeDropper={false} to turn it off.

import { ColorPicker } from '@fibrous/semi-ui-react';
export default function ColorPickerDemo() {
    return (
        <ColorPicker
            alpha
            eyeDropper
            onChange={(value) => {
                console.log(value);
            }}
        />
    );
}

Default Value

When converting between various color representation formats, there are theoretical errors between some formats, so the value returned to you by onChange is an object containing color values in three formats: hsva, hex, and rgba.

The defaultValue (uncontrolled) and value (controlled) you pass in should also be objects containing the same three formats.

We provide a static tool function colorStringToValue on the component to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb (the short form #3cb is also accepted) and hsv(176,71,77). A string that cannot be parsed throws an error.

import { ColorPicker } from '@fibrous/semi-ui-react';

export default function ColorPickerDemo() {
    return (
        <div>
            <ColorPicker
                defaultValue={ColorPicker.colorStringToValue('rgb(57,197,187)')}
                onChange={(value) => {
                    console.log(value);
                }}
                alpha
            />
        </div>
    );
}

Controlled

Controlled use by passing in value

import { useState } from 'react';
import { ColorPicker } from '@fibrous/semi-ui-react';
export default function ColorPickerDemo() {
    const [value, setValue] = useState(ColorPicker.colorStringToValue('#39c5bb'));
    return (
        <div>
            <ColorPicker
                value={value}
                onChange={(value) => {
                    setValue(value);
                }}
                alpha
            />
        </div>
    );
}

Rendering additional elements at the top and bottom

Use topSlot and bottomSlot to render additional elements at the top and bottom

import { ColorPicker } from '@fibrous/semi-ui-react';
export default function ColorPickerDemo() {
    return (
        <ColorPicker
            topSlot={<div> TopSlot</div>}
            bottomSlot={<div>Bottom Slot</div>}
            alpha
            onChange={(value) => {
                console.log(value);
            }}
        />
    );
}

Keyboard and Focus

• With usePopover, the default trigger is a named button, and Enter or Space opens the popup. The popup is a dialog that opens on click by default and closes with Esc. Its name defaults to the built-in text; an aria-label or aria-labelledby passed in popoverProps (ariaLabel, ariaLabelledby in Vue) takes precedence.
• The handles of the color area, the hue slider and the alpha slider can all be operated with the keyboard. The color area has two sliders, saturation and brightness; the hue slider and the alpha slider have one each.
• Arrow keys step by 1, PageUp and PageDown step by 10, and Home and End jump to the ends. In the color area, whichever slider has focus, Left and Right change saturation, while Up, Down, PageUp and PageDown change brightness; Home and End act on the focused slider. Keys pressed with Alt, Ctrl or Meta are not handled, so the browser and assistive technology keep them.
• A focused handle shows the theme focus ring; the color input, the alpha input and the format selector all have accessible names.

API Table

ColorPicker

Props

Attribute placement

className, style, ref and other native attributes and events land on the picker root element; with usePopover they land on the picker element inside the popup, not on the trigger or the dialog. When the caller passes aria-label or aria-labelledby without a role, the picker root gets role="group".

ColorValue

The value, defaultValue and onChange payload are all the same kind of object: