云策 WordPress 开发者社区

块编辑器开发文档

CircularOptionPicker

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

概述

CircularOptionPicker 是一个 WordPress 组件，用于以圆形按钮形式展示选项集，主要用于颜色选择等场景。该组件未导出，仅限在 @wordpress/components 包内部使用。

关键要点

  • 组件未导出，仅限内部使用
  • 支持通过 options 属性渲染选项，如 CircularOptionPicker.Option
  • 提供 actions 属性添加操作按钮，如 CircularOptionPicker.ButtonAction 或 CircularOptionPicker.DropdownLinkAction
  • 包含多个配置属性，如 className、asButtons、loop、aria-label 等
  • 包含子组件 CircularOptionPicker.ButtonAction 和 CircularOptionPicker.DropdownLinkAction，用于扩展功能

代码示例

import { useState } from 'react';
import { CircularOptionPicker } from '../circular-option-picker';

const Example = () => {
    const [ currentColor, setCurrentColor ] = useState();
    const colors = [
        { color: '#f00', name: 'Red' },
        { color: '#0f0', name: 'Green' },
        { color: '#00f', name: 'Blue' },
    ];
    const colorOptions = (
        <>
            { colors.map( ( { color, name }, index ) => {
                return (
                    <CircularOptionPicker.Option
                        key={ `${ color }-${ index }` }
                        tooltipText={ name }
                        style={ { backgroundColor: color, color } }
                        isSelected={ index === currentColor }
                        onClick={ () => setCurrentColor( index ) }
                    />
                );
            } ) }
        </>
    );
    return (
        <CircularOptionPicker
                options={ colorOptions }
                actions={
                    <CircularOptionPicker.ButtonAction
                        onClick={ () => setCurrentColor( undefined ) }
                    >
                        { 'Clear' }
                    </CircularOptionPicker.ButtonAction>
                }
            />
    );
};

注意事项

  • CircularOptionPicker.ButtonAction 继承 Button 组件的所有属性，但 href 和 target 除外
  • CircularOptionPicker.DropdownLinkAction 的 dropdownProps 继承 Dropdown 组件的所有属性，但 className 和 renderToggle 除外
  • 当 asButtons 不为 true 时，loop 属性用于控制键盘交互是否循环
📄 原文内容
This component is not exported, and therefore can only be used internally to the `@wordpress/components` package.

CircularOptionPicker is a component that displays a set of options as circular buttons.

Usage

import { useState } from 'react';
import { CircularOptionPicker } from '../circular-option-picker';

const Example = () => {
    const [ currentColor, setCurrentColor ] = useState();
    const colors = [
        { color: '#f00', name: 'Red' },
        { color: '#0f0', name: 'Green' },
        { color: '#00f', name: 'Blue' },
    ];
    const colorOptions = (
        <>
            { colors.map( ( { color, name }, index ) => {
                return (
                    <CircularOptionPicker.Option
                        key={ `${ color }-${ index }` }
                        tooltipText={ name }
                        style={ { backgroundColor: color, color } }
                        isSelected={ index === currentColor }
                        onClick={ () => setCurrentColor( index ) }
                    />
                );
            } ) }
        </>
    );
    return (
        <CircularOptionPicker
                options={ colorOptions }
                actions={
                    <CircularOptionPicker.ButtonAction
                        onClick={ () => setCurrentColor( undefined ) }
                    >
                        { 'Clear' }
                    </CircularOptionPicker.ButtonAction>
                }
            />
    );
};

Props

className: string

A CSS class to apply to the wrapper element.

  • Required: No

actions: ReactNode

The action(s) to be rendered after the options, such as a ‘clear’ button as seen in ColorPalette.

Usually a CircularOptionPicker.ButtonAction or CircularOptionPicker.DropdownLinkAction component.

  • Required: No

options: ReactNode

The options to be rendered, such as color swatches.

Usually a CircularOptionPicker.Option component.

  • Required: No

children: ReactNode

The child elements.

  • Required: No

asButtons: boolean

Whether the control should present as a set of buttons, each with its own tab stop.

  • Required: No
  • Default: false

loop: boolean

Prevents keyboard interaction from wrapping around. Only used when asButtons is not true.

  • Required: No
  • Default: true

aria-labelledby: string

The ID reference list of one or more elements that label the wrapper element.

  • Required: No

aria-label: string

The label for the wrapper element. Not used if an ‘aria-labelledby’ is provided.

  • Required: No
  • Default: Custom color picker

Subcomponents

CircularOptionPicker.ButtonAction

A ButtonAction is an action that is rendered as a button alongside the options themselves.

A common use case is a ‘clear’ button to deselect the currently selected option.

Props

className: string

A CSS class to apply to the underlying Button component.

  • Required: No
children: ReactNode

The button’s children.

  • Required: No
Inherited props

CircularOptionPicker.ButtonAction also inherits all of the Button props, except for href and target.

CircularOptionPicker.DropdownLinkAction

CircularOptionPicker.DropdownLinkAction is an action that’s hidden behind a dropdown toggle. The button is formatted as a link and rendered as an anchor element.

Props

className: string

A CSS class to apply to the underlying Dropdown component.

  • Required: No
linkText: string

The text to be displayed on the button.

  • Required: Yes
dropdownProps: object

The props for the underlying Dropdown component.

Inherits all of the Dropdown props, except for className and renderToggle.

  • Required: Yes
buttonProps: object

Props for the underlying Button component.

Inherits all of the Button props, except for href, target, and children.

  • Required: No