ColorPalette 允许用户从预定义的颜色条目列表中选取颜色。
用法
import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const MyColorPalette = () => {
const [ color, setColor ] = useState ( '#f00' )
const colors = [
{ name: 'red', color: '#f00' },
{ name: 'white', color: '#fff' },
{ name: 'blue', color: '#00f' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( color ) => setColor( color ) }
/>
);
} );
如果您在编辑器外部使用此组件，您可以
确保 Tooltip 的定位
对于 ColorPalette 的颜色色板，通过渲染您的 ColorPalette 与一个Popover.Slot 在元素树更上层的位置，并且在整体范围内位于SlotFillProvider 内来实现。
属性
该组件接受以下属性。
clearable: boolean
调色板是否应包含清除按钮。
- 必需：否
- 默认值：
true
colors: PaletteObject[] | ColorObject[]
要显示的颜色数组。当显示多个颜色调色板供选择时，数组的格式会从颜色对象数组变为颜色调色板数组。
- 必需：否
- 默认值：
[]
disableCustomColors: boolean
是否允许用户在预定义选项（通过 colors 属性定义）之外选择自定义颜色。
- 必需：否
- 默认值：
false
enableAlpha: boolean
这控制在选择自定义颜色时是否提供 alpha 通道。
- 必需：否
- 默认值：
false
headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | ‘1’ | ‘2’ | ‘3’ | ‘4’ | ‘5’ | ‘6’
标题级别。
- 必需：否
- 默认值：
2
value: string
当前激活的值。
- 必需：否
onChange: OnColorChange
选中颜色时调用的回调函数。
- 必需：是
presentation: ‘listbox’ | ‘toggle-buttons’ | ‘command-buttons’
控制预定义色板的交互和辅助功能语义。
listbox为整个调色板使用一个制表位。箭头键在选项之间移动。选项通过aria-selected暴露选中状态。toggle-buttons为每个色板使用一个制表位。色板通过aria-pressed暴露选中状态。command-buttons为每个色板使用一个制表位。色板不暴露选中状态。value和selectedSlug属性不会将预定义色板标记为选中，激活色板始终会使用该色板调用onChange。value属性仍然控制自定义颜色选择器。必需：否
- 默认值：
listbox
loop: boolean
防止箭头键导航循环环绕。仅与 listbox 展示模式一起使用。
- 必需：否
- 默认值：
true