云策 WordPress 开发者社区

块编辑器开发文档

ColorPicker

查看官方原文 ↗
💡 云策文档标注

概述

ColorPicker 是基于 react-colorful 的颜色选择组件，支持视觉选择或通过 RGB(A)、HSL(A) 和 Hex(8) 值操作颜色。它适用于 WordPress 开发中的颜色设置场景。

关键要点

  • 组件基于 react-colorful，提供直观的颜色选择界面
  • 支持多种颜色格式：RGB(A)、HSL(A) 和 Hex(8)
  • 可通过 Props 配置颜色值、变化回调、透明度等选项

代码示例

import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';

function Example() {
    const [color, setColor] = useState();
    return (
        <ColorPicker
            color={color}
            onChange={setColor}
            enableAlpha
            defaultValue="#000"
        />
    );
}

注意事项

  • color Prop 必须是 hex 或 hex8 字符串，非必需
  • onChange 回调始终传递 hex 或 hex8 字符串，非必需
  • enableAlpha 控制是否显示透明度通道，默认 false
  • defaultValue 为可选默认颜色值，默认 '#fff'
  • copyFormat 定义点击颜色格式时的复制格式，可选 hex、hsl、rgb
📄 原文内容

ColorPicker is a color picking component based on react-colorful. It lets you pick a color visually or by manipulating the individual RGB(A), HSL(A) and Hex(8) color values.

Usage

import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';

function Example() {
    const [color, setColor] = useState();
    return (
        <ColorPicker
            color={color}
            onChange={setColor}
            enableAlpha
            defaultValue="#000"
        />
    );
}

Props

color: string

The current color value to display in the picker. Must be a hex or hex8 string.

  • Required: No

onChange: (hex8Color: string) => void

Fired when the color changes. Always passes a hex or hex8 color string.

  • Required: No

enableAlpha: boolean

When true the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.

  • Required: No
  • Default: false

defaultValue: string | undefined

An optional default value to use for the color picker.

  • Required: No
  • Default: '#fff'

copyFormat: 'hex' | 'hsl' | 'rgb' | undefined

The format to copy when clicking the displayed color format.

  • Required: No