Компонент GradientPicker в WordPress предоставляет удобный интерфейс для выбора и настройки градиентов с несколькими цветами. Он поддерживает как линейные, так и радиальные градиенты, что позволяет создавать разнообразные визуальные эффекты. В этом руководстве мы рассмотрим, как использовать GradientPicker, опишем все его параметры и приведем примеры.
Базовое использование
Для начала добавим GradientPicker в React-компонент и определим его состояние, чтобы хранить выбранный градиент.
import { useState } from 'react';
import { GradientPicker } from '@wordpress/components';
const MyGradientPicker = () => {
const [gradient, setGradient] = useState(null);
return (
<GradientPicker
value={gradient}
onChange={(currentGradient) => setGradient(currentGradient)}
gradients={[
{
name: 'Sunset Glow',
gradient: 'linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)',
slug: 'sunset-glow',
},
{
name: 'Ocean Blue',
gradient: 'linear-gradient(135deg, #00c6ff 0%, #0072ff 100%)',
slug: 'ocean-blue',
},
{
name: 'Moss Green',
gradient: 'linear-gradient(135deg, #56ab2f 0%, #a8e063 100%)',
slug: 'moss-green',
},
]}
/>
);
};
Теперь давайте рассмотрим каждый параметр компонента GradientPicker.
Описание параметров
1. className
- Тип:
string - Описание: Класс CSS, добавляемый к обёртке компонента для стилизации.
- Обязательный: Нет
<GradientPicker className="custom-gradient-picker" />
2. value
- Тип:
string - Описание: Текущее значение градиента, которое передается как CSS-значение (например,
linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)). Можно также передатьnull, если никакой градиент не выбран. - Обязательный: Нет
- Значение по умолчанию:
linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)
<GradientPicker value="linear-gradient(45deg, #ff7e5f 0%, #feb47b 100%)" />
3. onChange
- Тип:
(currentGradient: string | undefined) => void - Описание: Функция, вызываемая при изменении градиента. В качестве аргумента принимает
currentGradient, что позволяет управлять состоянием выбранного градиента. - Обязательный: Да
<GradientPicker
onChange={(newGradient) => console.log("Selected Gradient:", newGradient)}
/>
4. gradients
- Тип:
Array<{ name: string, gradient: string, slug: string }> - Описание: Массив предопределённых градиентов, которые отображаются над селектором.
- Обязательный: Нет
- Значение по умолчанию:
[]
<GradientPicker
gradients={[
{ name: 'Twilight', gradient: 'linear-gradient(90deg, #ffd700 0%, #ff7e5f 100%)', slug: 'twilight' },
{ name: 'Seabreeze', gradient: 'linear-gradient(135deg, #0f3443 0%, #34e89e 100%)', slug: 'seabreeze' },
]}
/>
5. clearable
- Тип:
boolean - Описание: Определяет, будет ли у палитры кнопка для очистки выбранного градиента.
- Обязательный: Нет
- Значение по умолчанию:
true
<GradientPicker clearable={false} />
6. disableCustomGradients
- Тип:
boolean - Описание: Если
true, отключает возможность выбора произвольного градиента, и пользователь может выбирать только из предопределённых вариантов. - Обязательный: Нет
- Значение по умолчанию:
false
<GradientPicker disableCustomGradients />
7. headingLevel
- Тип:
1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6' - Описание: Определяет уровень заголовка, который отображается, если предоставлено несколько источников градиентов.
- Обязательный: Нет
- Значение по умолчанию:
2
<GradientPicker headingLevel={3} />
8. asButtons
- Тип:
boolean - Описание: Определяет, будет ли управление представлено в виде набора кнопок с собственным таб-стопом.
- Обязательный: Нет
- Значение по умолчанию:
false
<GradientPicker asButtons />
9. loop
- Тип:
boolean - Описание: Запрещает циклическое взаимодействие с клавиатурой. Применяется, если
asButtonsне равноtrue. - Обязательный: Нет
- Значение по умолчанию:
true
<GradientPicker loop={false} />
Полный пример использования
Давайте соберем все параметры в одном примере, чтобы продемонстрировать, как создать полностью настроенный GradientPicker:
import { useState } from 'react';
import { GradientPicker } from '@wordpress/components';
const CustomGradientPicker = () => {
const [gradient, setGradient] = useState('linear-gradient(135deg, #e66465, #9198e5)');
return (
<GradientPicker
className="custom-gradient-picker"
value={gradient}
onChange={(newGradient) => setGradient(newGradient)}
gradients={[
{ name: 'Sunrise', gradient: 'linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%)', slug: 'sunrise' },
{ name: 'Forest', gradient: 'linear-gradient(45deg, #5f2c82 0%, #49a09d 100%)', slug: 'forest' },
{ name: 'Desert', gradient: 'linear-gradient(45deg, #ffd89b 0%, #19547b 100%)', slug: 'desert' },
]}
clearable
disableCustomGradients={false}
headingLevel={2}
asButtons={false}
loop={true}
/>
);
};
Этот пример демонстрирует, как использовать GradientPicker с предопределёнными градиентами, которые пользователь может выбирать. Кнопка для очистки включена, а также доступен выбор произвольных градиентов.
Заключение
Компонент GradientPicker предоставляет мощный инструмент для настройки визуальных стилей с помощью градиентов. С его помощью можно предложить пользователю гибкие настройки оформления с поддержкой нескольких предустановленных градиентов и опцией их кастомизации.