ColorPalette — это компонент WordPress, который позволяет пользователю выбирать цвет из заранее определенного набора. Он особенно удобен в случаях, когда нужно ограничить выбор пользователя конкретной цветовой палитрой или добавить настройку с возможностью выбора произвольного цвета.
Основные сведения о ColorPalette
ColorPalette предоставляет простой интерфейс для выбора цвета, который можно интегрировать в любые панели настроек. Пользователь видит набор цветных кнопок, каждая из которых представляет определенный цвет. Компонент также позволяет включать и отключать возможность выбора произвольного цвета и устанавливать альфа-канал для прозрачности.
Применение компонента ColorPalette
Чтобы использовать ColorPalette, импортируйте его из @wordpress/components и передайте массив цветов через свойство colors, а выбранное значение — через value. Функция onChange отслеживает изменение выбора.
Пример базовой настройки:
import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const MyColorPalette = () => {
const [ color, setColor ] = useState('#f00');
const colors = [
{ name: 'Красный', color: '#f00' },
{ name: 'Белый', color: '#fff' },
{ name: 'Синий', color: '#00f' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( newColor ) => setColor( newColor ) }
/>
);
};
Основные свойства (Props)
clearable
- Описание: Указывает, будет ли доступна кнопка для очистки выбора.
- Тип:
boolean - По умолчанию:
true - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value={ color } clearable={ false } />
colors
- Описание: Массив цветов, которые будут доступны для выбора. Каждый объект массива включает название и код цвета.
- Тип:
PaletteObject[] | ColorObject[] - По умолчанию:
[] - Обязателен: Нет
- Пример:
const colors = [
{ name: 'Зеленый', color: '#008000' },
{ name: 'Желтый', color: '#FFFF00' },
{ name: 'Черный', color: '#000000' },
];
disableCustomColors
- Описание: Позволяет отключить возможность выбора произвольного цвета.
- Тип:
boolean - По умолчанию:
false - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value={ color } disableCustomColors={ true } />
enableAlpha
- Описание: Устанавливает возможность управления прозрачностью для настраиваемых цветов.
- Тип:
boolean - По умолчанию:
false - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value={ color } enableAlpha={ true } />
headingLevel
- Описание: Уровень заголовка, используемый для компонента, что полезно для SEO и доступности.
- Тип:
1 | 2 | 3 | 4 | 5 | 6 | ‘1’ | ‘2’ | ‘3’ | ‘4’ | ‘5’ | ‘6’ - По умолчанию:
2 - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value={ color } headingLevel={ 3 } />
value
- Описание: Текущее значение цвета.
- Тип:
string - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value="#00ff00" />
onChange
- Описание: Функция обратного вызова, вызываемая при выборе цвета.
- Тип:
function - Обязателен: Да
- Пример:
const handleColorChange = ( newColor ) => console.log('Выбранный цвет:', newColor);
asButtons
- Описание: Отображает каждый цветной индикатор как отдельную кнопку с поддержкой перехода по табуляции.
- Тип:
boolean - По умолчанию:
false - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value={ color } asButtons={ true } />
loop
- Описание: Контролирует замыкание выбора с помощью клавиатуры. Работает, если
asButtonsустановлен вfalse. - Тип:
boolean - По умолчанию:
true - Обязателен: Нет
- Пример:
<ColorPalette colors={ colors } value={ color } loop={ false } />
Пример 1: Базовая палитра цветов
Это минимальная настройка ColorPalette с набором из трех цветов.
import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const BasicColorPalette = () => {
const [ color, setColor ] = useState('#ff6347');
const colors = [
{ name: 'Красный', color: '#ff6347' },
{ name: 'Синий', color: '#4682b4' },
{ name: 'Зеленый', color: '#32cd32' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( newColor ) => setColor( newColor ) }
/>
);
};
Пример 2: Отключение произвольных цветов и кнопки очистки
В этом примере показано, как отключить кнопку очистки и произвольные цвета, оставив выбор только из предустановленных вариантов.
import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const FixedColorPalette = () => {
const [ color, setColor ] = useState('#ffd700');
const colors = [
{ name: 'Золотой', color: '#ffd700' },
{ name: 'Серебряный', color: '#c0c0c0' },
{ name: 'Бронзовый', color: '#cd7f32' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( newColor ) => setColor( newColor ) }
disableCustomColors={ true }
clearable={ false }
/>
);
};
Пример 3: Палитра с настройкой альфа-канала
Этот пример позволяет пользователю настраивать прозрачность для выбранного цвета.
import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const AlphaColorPalette = () => {
const [ color, setColor ] = useState('rgba(255, 0, 0, 0.5)');
const colors = [
{ name: 'Полупрозрачный красный', color: 'rgba(255, 0, 0, 0.5)' },
{ name: 'Полупрозрачный синий', color: 'rgba(0, 0, 255, 0.5)' },
{ name: 'Полупрозрачный зеленый', color: 'rgba(0, 128, 0, 0.5)' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( newColor ) => setColor( newColor ) }
enableAlpha={ true }
/>
);
};
Пример 4: Динамическая смена палитры с кнопками
В этом примере используется asButtons, позволяющий управлять переходом между цветами с помощью клавиатуры.
import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const ButtonColorPalette = () => {
const [ color, setColor ] = useState('#800080');
const colors = [
{ name: 'Пурпурный', color: '#800080' },
{ name: 'Желтый', color: '#ffff00' },
{ name: 'Циан', color: '#00ffff' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( newColor ) => setColor( newColor ) }
asButtons={ true }
/>
);
};
Заключение
ColorPalette — мощный компонент для управления цветами в интерфейсах WordPress. С его помощью можно гибко настраивать выбор цветов, ограничивая палитру или добавляя настраиваемые цвета и прозрачность.