GradientPickerPanel — это экспериментальный компонент WordPress, который расширяет функциональность GradientPicker, оборачивая его в элемент PanelBody. Этот инструмент позволяет разработчикам гибко и наглядно управлять цветовыми переходами в их проектах на WordPress, упрощая создание захватывающих пользовательских интерфейсов.
Компонент GradientPickerPanel дает доступ к тем же функциям, что и GradientPicker, но дополнительно включает в себя панель для более удобного управления. Это делает его более адаптируемым для использования в случае, если вам необходимо представить настройки перехода цветов в виде панели.
Подключение компонента
Данный компонент является экспериментальным, поэтому для его использования необходимо импортировать его с __experimental префиксом. Это означает, что его API может измениться в будущих версиях. Тем не менее, на данный момент это выглядит следующим образом:
import { __experimentalGradientPickerPanel } from '@wordpress/components';Структура и использование компонента
Компонент GradientPickerPanel можно легко интегрировать в ваш проект. Давайте рассмотрим пример, как можно использовать его для выбора градиента внутри панели:
import { __experimentalGradientPickerPanel, PanelBody } from '@wordpress/components';
import { useState } from '@wordpress/element';
const GradientExample = () => {
const [gradientValue, setGradientValue] = useState();
return (
<PanelBody title="Выбор градиента">
<__experimentalGradientPickerPanel
value={gradientValue}
onChange={setGradientValue}
gradients={[
{ name: 'Красный к синему', gradient: 'linear-gradient(to right, red, blue)' },
{ name: 'Зеленый к желтому', gradient: 'linear-gradient(to right, green, yellow)' }
]}
/>
</PanelBody>
);
};
export default GradientExample;
Параметры GradientPickerPanel
Компонент GradientPickerPanel поддерживает несколько ключевых параметров, среди которых:
- value — текущее значение градиента. Ожидается, что это будет строка CSS-градиента.
- onChange — функция, вызываемая при изменении значения. Возвращает новое значение градиента.
- gradients — массив объектов градиентов, каждый объект должен содержать
nameиgradient(CSS-градиент).
Заключение
Использование GradientPickerPanel позволяет разработчикам улучшить управление цветовыми переходами в WordPress, создавая более интерактивные и привлекательные пользовательские интерфейсы. Экспериментальный компонент все еще может меняться, поэтому следите за обновлениями в будущих версиях WordPress.
