此组件未导出，因此只能用于 `@wordpress/components` 包内部。
CircularOptionPicker 是一个将一组选项显示为圆形按钮的组件。
用法
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>
}
/>
);
};
属性
className: string
应用于包装元素的 CSS 类名。
- 是否必需：否
actions: ReactNode
在选项之后渲染的操作，例如 ColorPalette 中看到的“清除”按钮。
通常是 CircularOptionPicker.ButtonAction 或 CircularOptionPicker.DropdownLinkAction 组件。
- 是否必需：否
options: ReactNode
要渲染的选项，例如颜色色板。
通常是 CircularOptionPicker.Option 组件。
- 是否必需：否
children: ReactNode
子元素。
- 是否必需：否
presentation: ‘listbox’ | ‘toggle-buttons’ | ‘command-buttons’
控制色板的交互方式和无障碍语义。
listbox为选择器使用一个制表位。箭头键可在选项之间移动。选项通过aria-selected暴露选中状态。toggle-buttons为每个色板使用一个制表位。色板通过aria-pressed暴露选中状态。command-buttons为每个色板使用一个制表位。色板不暴露选中状态。当每个色板运行命令（例如打开编辑器）时，请使用此呈现方式。是否必需：否
- 默认值：
listbox
loop: boolean
防止箭头键导航循环环绕。仅与 listbox 呈现方式配合使用。
- 是否必需：否
- 默认值：
true
aria-labelledby: string
标记包装元素的一个或多个元素的 ID 引用列表。
- 是否必需：否
aria-label: string
包装元素的标签。如果提供了 `aria-labelledby`，则不使用此属性。
- 是否必需：否
- 默认值：
Custom color picker
子组件
CircularOptionPicker.ButtonAction
ButtonAction 是一种作为按钮与选项本身一起渲染的操作。
常见用例是“清除”按钮，用于取消当前选中的选项。
属性
className: string
应用于底层 Button 组件的 CSS 类名。
- 是否必需：否
children: ReactNode
按钮的子元素。
- 是否必需：否
继承的属性
CircularOptionPicker.ButtonAction 还继承了所有 Button 属性，除了 href 和 target。
CircularOptionPicker.DropdownLinkAction
CircularOptionPicker.DropdownLinkAction 是一个隐藏在下拉切换按钮后面的操作。该按钮格式化为链接并渲染为 anchor 元素。
属性
className: string
应用于底层 Dropdown 组件的 CSS 类名。
- 是否必需：否
linkText: string
要在按钮上显示的文本。
- 是否必需：是
dropdownProps: object
底层 Dropdown 组件的属性。
继承了所有 Dropdown 属性，除了 className 和 renderToggle。
- 是否必需：是
buttonProps: object
底层 Button 组件的属性。
继承了所有 Button 属性，除了 href、target 和 children。
- 是否必需：否