ColorPicker — это компонент WordPress, созданный на основе библиотеки react-colorful, позволяющий выбирать цвет визуально или через ручное управление значениями RGB(A), HSL(A), Hex(8). Этот компонент широко используется в интерфейсе WordPress, предоставляя пользователям гибкие возможности настройки цвета с опциональной поддержкой альфа-канала.
Основные сведения о ColorPicker
ColorPicker предлагает интуитивно понятный интерфейс для выбора цвета, в том числе с возможностью управления прозрачностью. Компонент поддерживает копирование значений в разных форматах и позволяет настроить начальное значение цвета.
Применение компонента ColorPicker
Чтобы использовать ColorPicker, импортируйте его из @wordpress/components и передайте ему значение цвета через color. При каждом изменении цвета вызывается функция onChange, что позволяет обновлять состояние или выполнять другие действия.
import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
function MyColorPickerExample() {
const [color, setColor] = useState('#00ff00'); // Начальное значение — зеленый
return (
<ColorPicker
color={color}
onChange={setColor}
enableAlpha
defaultValue="#000000" // Черный по умолчанию
/>
);
}
Основные свойства (Props)
color
- Описание: Текущее значение цвета, отображаемое в интерфейсе. Должно быть указано в формате hex или hex8.
- Тип:
string - По умолчанию: Нет
- Обязателен: Нет
- Пример:
<ColorPicker color="#ff5733" />onChange
- Описание: Функция обратного вызова, вызываемая при изменении цвета. Возвращает значение в формате hex или hex8.
- Тип:
(hex8Color: string) => void - По умолчанию: Нет
- Обязателен: Нет
- Пример:
const handleColorChange = (newColor) => {
console.log('Выбранный цвет:', newColor);
};
enableAlpha
- Описание: Включает отображение альфа-канала в интерфейсе выбора цвета и в нижних полях ввода.
- Тип:
boolean - По умолчанию:
false - Обязателен: Нет
- Пример:
<ColorPicker color="#008080" enableAlpha={ true } />
defaultValue
- Описание: Устанавливает начальное значение цвета для компонента.
- Тип:
string | undefined - По умолчанию:
'#fff' - Обязателен: Нет
- Пример:
<ColorPicker defaultValue="#3498db" />copyFormat
- Описание: Определяет формат для копирования при нажатии на отображаемое значение цвета. Поддерживает форматы
hex,hsl,rgb. - Тип:
'hex' | 'hsl' | 'rgb' | undefined - По умолчанию: Нет
- Обязателен: Нет
- Пример:
<ColorPicker color="#1abc9c" copyFormat="rgb" />
Пример 1: Базовый выбор цвета
Этот пример демонстрирует базовое использование компонента ColorPicker с начальным значением цвета #ff6347 (томато).
import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
function BasicColorPicker() {
const [color, setColor] = useState('#ff6347');
return (
<ColorPicker
color={color}
onChange={setColor}
/>
);
}
Пример 2: Включение альфа-канала
В этом примере показано, как включить альфа-канал, чтобы пользователь мог выбрать прозрачность цвета. Начальное значение цвета — полупрозрачный синий.
import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
function AlphaEnabledColorPicker() {
const [color, setColor] = useState('rgba(70, 130, 180, 0.5)');
return (
<ColorPicker
color={color}
onChange={setColor}
enableAlpha={true}
/>
);
}
Пример 3: Установка начального значения цвета и формата копирования
В данном примере компонент инициализируется цветом по умолчанию #2ecc71 (зелёный), а формат для копирования задан как rgb.
import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
function DefaultColorWithCopyFormat() {
const [color, setColor] = useState();
return (
<ColorPicker
color={color}
onChange={setColor}
defaultValue="#2ecc71"
copyFormat="rgb"
/>
);
}
Пример 4: Компонент с логикой обновления цвета и выводом значений
Этот пример включает обработку изменения цвета и вывод текущего значения цвета. Это позволяет отслеживать изменения и использовать значение цвета в других частях интерфейса.
import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
function ColorPickerWithDisplay() {
const [color, setColor] = useState('#3498db'); // Начальный синий
return (
<div>
<ColorPicker
color={color}
onChange={setColor}
enableAlpha={true}
/>
<p>Текущий цвет: {color}</p>
</div>
);
}
Пример 5: Переопределение начального цвета и смена формата копирования на hsl
Этот пример демонстрирует работу с форматом hsl для копирования и начальное значение #ffb6c1 (светло-розовый).
import { useState } from 'react';
import { ColorPicker } from '@wordpress/components';
function HSLColorPickerExample() {
const [color, setColor] = useState();
return (
<ColorPicker
color={color}
onChange={setColor}
defaultValue="#ffb6c1"
copyFormat="hsl"
/>
);
}
Заключение
ColorPicker — это компонент для выбора и настройки цвета в интерфейсе WordPress. Компонент позволяет работать с несколькими цветовыми форматами, включая hex, rgb, hsl, и поддерживает выбор прозрачности через альфа-канал. Использование ColorPicker улучшает пользовательский интерфейс, делая настройку цвета интуитивно понятной и гибкой.