Компонент DuotonePicker в WordPress представляет собой инструмент для создания и выбора цветовых дуотоновых эффектов, который позволяет пользователям выбирать и применять дуотоновые фильтры к изображениям. Он предоставляет простой интерфейс для выбора цвета из палитры и назначения цветового градиента для использования в интерфейсе WordPress.
Использование компонента DuotonePicker
Пример базового использования компонента DuotonePicker для выбора дуотонового фильтра и отображения результата:
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 ExampleDuotonePicker = () => {
const [duotone, setDuotone] = useState(['#000000', '#ffffff']);
return (
<>
<DuotonePicker
duotonePalette={DUOTONE_PALETTE}
colorPalette={COLOR_PALETTE}
value={duotone}
onChange={setDuotone}
/>
<DuotoneSwatch values={duotone} />
</>
);
};
Описание Props для DuotonePicker
Компонент DuotonePicker поддерживает следующие свойства, что позволяет гибко управлять палитрой цветов, поведением компонента и внешним видом:
1. colorPalette: Object[]
Массив объектов с предустановленными цветами для палитры. Каждый объект должен иметь следующую структуру:
- color: Цвет в формате HEX, представляющий значение цвета.
- name: Название цвета для отображения в интерфейсе.
- slug: Уникальный идентификатор цвета (slug).
Обязательный: Да
Пример:
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' },
];
2. duotonePalette: Object[]
Массив объектов с предустановленными цветами для дуотоновых эффектов. Каждый объект имеет следующую структуру:
- colors: Массив из двух цветов в формате HEX, определяющий дуотоновый эффект.
- name: Название дуотонового эффекта для отображения.
- slug: Уникальный идентификатор дуотона (slug).
Обязательный: Да
Пример:
const DUOTONE_PALETTE = [
{ colors: ['#8c00b7', '#fcff41'], name: 'Purple and Yellow', slug: 'purple-yellow' },
{ colors: ['#000097', '#ff4747'], name: 'Blue and Red', slug: 'blue-red' },
];
3. value: string[]
Массив значений цветов, представляющих текущий дуотоновый эффект. Обычно это массив из двух HEX-значений, определяющих начальный и конечный цвета.
Обязательный: Да
Пример:
const [duotone, setDuotone] = useState(['#000000', '#ffffff']);
4. onChange: (newDuotone: string[]) => void
Функция обратного вызова, вызываемая при изменении дуотонового эффекта. Эта функция получает в качестве аргумента новый массив значений дуотоновых цветов.
Обязательный: Да
Пример:
const handleDuotoneChange = (newDuotone) => {
console.log('Selected Duotone:', newDuotone);
};
5. asButtons: boolean
Определяет, должен ли интерфейс компонента отображаться в виде набора кнопок, каждая из которых имеет отдельный фокус для навигации с клавиатуры.
- Обязательный: Нет
- По умолчанию:
false - Пример:
true— для отображения в виде кнопок.
6. loop: boolean
Контролирует цикличность навигации при использовании клавиатуры. Полезен только если asButtons равен false. Если loop установлен в false, навигация останавливается на первом и последнем элементе.
- Обязательный: Нет
- По умолчанию:
true - Пример:
false— чтобы отключить цикличность.
Дополнительный компонент DuotoneSwatch
Компонент DuotoneSwatch используется для отображения предварительного просмотра текущего дуотонового эффекта. Он принимает values, представляющие текущие дуотоновые цвета, или null для отображения иконки-заполнителя.
Props для DuotoneSwatch
1. values: string[] | null
Массив значений цветов, представляющий текущий дуотоновый эффект, либо null для отображения значка-заполнителя.
- Обязательный: Нет
- Пример:
<DuotoneSwatch values={['#8c00b7', '#fcff41']} />Продвинутый пример использования
Пример с использованием всех свойств и дополнительной логики управления:
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' },
{ colors: ['#ff4747', '#000097'], name: 'Red and Blue', slug: 'red-blue' },
];
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' },
{ color: '#00ff00', name: 'Green', slug: 'green' },
];
const AdvancedDuotonePicker = () => {
const [duotone, setDuotone] = useState(['#ff4747', '#000097']);
const handleDuotoneChange = (newDuotone) => {
setDuotone(newDuotone);
console.log('Updated Duotone:', newDuotone);
};
return (
<>
<DuotonePicker
duotonePalette={DUOTONE_PALETTE}
colorPalette={COLOR_PALETTE}
value={duotone}
onChange={handleDuotoneChange}
asButtons={true}
loop={false}
/>
<DuotoneSwatch values={duotone} />
</>
);
};
В этом примере:
- Мы используем свойство
asButtonsдля отображения дуотоновых эффектов в виде кнопок. - Устанавливаем
loopвfalse, чтобы отключить цикличную навигацию. - Используем
handleDuotoneChangeдля управления состоянием и логирования выбранных цветов.
Заключение
Компонент DuotonePicker в WordPress позволяет гибко управлять дуотоновыми эффектами, что идеально подходит для реализации цветовых фильтров на изображениях и элементах интерфейса. С его помощью можно настраивать цветовые палитры, стили и управлять выбором дуотонов с помощью дополнительных свойств.