云策 WordPress 开发者社区

块编辑器开发文档

DuotonePicker

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

概述

DuotonePicker 是 WordPress 组件库中的一个 React 组件，用于选择双色调颜色效果。它允许开发者通过预设颜色和双色调调色板来配置和交互。

关键要点

  • DuotonePicker 用于选择双色调颜色，支持自定义颜色和双色调预设。
  • DuotoneSwatch 是一个辅助组件，用于显示当前选中的双色调颜色或占位符图标。
  • 组件通过 props 如 colorPalette、duotonePalette、value 和 onChange 进行配置和控制。
  • 可选 props 如 asButtons 和 loop 提供了额外的交互和键盘导航控制。

代码示例

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 } />
        </>
    );
};

注意事项

  • colorPalette 和 duotonePalette 是必需 props，需提供数组格式的预设数据。
  • value 和 onChange 用于管理双色调颜色的状态和更新。
  • asButtons 和 loop props 是可选的，用于控制组件呈现方式和键盘交互行为。
📄 原文内容

Usage

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 Props

colorPalette

  • Type: Object[]
  • Required: Yes

Array of color presets of the form { color: '#000000', name: 'Black', slug: 'black' }.

duotonePalette

  • Type: Object[]
  • Required: Yes

Array of duotone presets of the form { colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }.

value

  • Type: string[]
  • Required: Yes

An array of colors for the duotone effect.

onChange

  • Type: Function
  • Required: Yes

Callback which is called when the duotone colors change.

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

DuotoneSwatch Props

values

  • Type: string[] | null
  • Required: No

An array of colors to show or null to show the placeholder swatch icon.