用法
import { useState } from 'react';
import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
const DUOTONE_PALETTE = [
{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
];
const COLOR_PALETTE = [
{ color: '#ff4747', name: 'Red', slug: 'red' },
{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
{ color: '#000097', name: 'Blue', slug: 'blue' },
{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
];
const Example = () => {
const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
return (
<>
<DuotonePicker
duotonePalette={ DUOTONE_PALETTE }
colorPalette={ COLOR_PALETTE }
value={ duotone }
onChange={ setDuotone }
/>
<DuotoneSwatch values={ duotone } />
</>
);
};
DuotonePicker 属性
colorPalette
- 类型：
Object[] - 必需：是
颜色预设数组，格式为 { color: '#000000', name: 'Black', slug: 'black' }。
duotonePalette
- 类型：
Object[] - 必需：是
双色预设数组，格式为 { colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }。
value
- 类型：
string[] - 必需：是
用于双色效果的顏色数组。
selectedSlug
- 类型：
string - 必需：否
所选双色预设的 slug。当提供非空的 selectedSlug 时，选择将严格由 slug 决定，从而区分拥有相同颜色对的两个预设。在此模式下，slug 不匹配的预设即使其颜色与 value 匹配，也不会显示为已选中状态。
空字符串被视为与 undefined 相同：选择回退到通过颜色值进行匹配。
onChange
- 类型：
(value: string[] | 'unset' | undefined, index?: number | undefined, slug?: string | undefined) => void - 必需：是
双色颜色更改时调用的函数。它接收新的 value 作为参数。当从 duotonePalette 中选择一个预设时，第二个参数是其索引，第三个参数是其 slug。
每当未选择任何预设时（即自定义、取消设置和清除控件，以及取消选择当前选定的预设，此时仅报告 undefined），这两个参数都会被省略。
presentation: ‘listbox’ | ‘toggle-buttons’ | ‘command-buttons’
控制预定义色块的交互方式和无障碍语义。
listbox使用一个选项卡停止位供选择器使用。箭头键在选项之间移动。选项通过aria-selected暴露选择状态。toggle-buttons为每个色块使用一个选项卡停止位。色块通过aria-pressed暴露选择状态。command-buttons为每个色块使用一个选项卡停止位。色块不暴露选择状态。value和selectedSlug属性不会将预定义色标记为选中状态，并且激活色块始终会使用该色块调用onChange。必需：否
- 默认值：
listbox
loop: boolean
防止箭头键导航环绕。仅与 listbox 呈现方式一起使用。
- 必需：否
- 默认值：
true
DuotoneSwatch 属性
values
- 类型：
string[] | null - 必需：否
要显示的颜色数组，或显示占位符色块图标的 null。