В WordPress компонент BorderBoxControl предоставляет интерфейс для настройки стиля, цвета и ширины границы контейнера. Он позволяет задавать параметры границы как для всего контейнера, так и для каждой стороны отдельно. В этой статье рассмотрим подробное использование BorderBoxControl, его параметры и приведем уникальные примеры для реализации в проекте WordPress.
Особенности работы с BorderBoxControl
BorderBoxControl предлагает два режима просмотра:
- «Связанный» режим – настраивает границу целиком, позволяя задать параметры для всего контейнера через один общий
BorderControl. - «Разделенный» режим – настраивает каждую сторону границы отдельно. В этом режиме для каждой стороны контейнера (верхней, правой, нижней и левой) задается свой набор параметров.
В процессе переключения между режимами можно столкнуться с ситуацией, когда отдельные стороны границы не совпадают по параметрам. Например, если цвета и стиль одинаковые, но ширина отличается, то в «связанном» режиме будет отображен цвет и стиль, но для ширины будет показан текст «Mixed».
Пример использования компонента BorderBoxControl
import { useState } from 'react';
import { BorderBoxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
// Определение палитры цветов
const colors = [
{ name: 'Ocean Blue', color: '#007bff' },
{ name: 'Sunset Orange', color: '#ff4500' },
{ name: 'Grass Green', color: '#32cd32' },
{ name: 'Stone Gray', color: '#808080' },
];
// Создание компонента
const CustomBorderBoxControl = () => {
const defaultBorder = {
color: '#007bff',
style: 'solid',
width: '2px',
};
const [borders, setBorders] = useState({
top: defaultBorder,
right: defaultBorder,
bottom: defaultBorder,
left: defaultBorder,
});
// Обработчик изменений
const onChange = (newBorders) => setBorders(newBorders);
return (
<BorderBoxControl
__next40pxDefaultSize
colors={colors}
label={__('Границы')}
onChange={onChange}
value={borders}
enableAlpha={true}
enableStyle={true}
disableCustomColors={false}
hideLabelFromVision={false}
popoverPlacement="bottom-end"
popoverOffset={8}
/>
);
};
Описание параметров компонента BorderBoxControl
colors
- Описание: Массив объектов цветов, каждый из которых может включать
nameиcolor. - Тип: Массив объектов
PaletteObjectилиColorObject.
const colors = [
{ name: 'Ocean Blue', color: '#007bff' },
{ name: 'Sunset Orange', color: '#ff4500' },
];
disableCustomColors
- Описание: Запрещает выбор произвольных цветов, если установлен в
true. - Тип:
boolean. - Значение по умолчанию:
false.
enableAlpha
- Описание: Включает канал прозрачности (alpha) для выбора цвета.
- Тип:
boolean. - Значение по умолчанию:
false.
enableStyle
- Описание: Включает возможность выбора стиля границы.
- Тип:
boolean. - Значение по умолчанию:
true.
hideLabelFromVision
- Описание: Скрывает метку для обычного просмотра, оставляя видимой только для экранных ридеров.
- Тип:
boolean. - Значение по умолчанию:
false.
label
- Описание: Текст для метки, отображаемой вместе с элементом управления.
- Тип:
string.
onChange
- Описание: Функция-обработчик, вызываемая при изменении параметров границы.
- Тип:
(value?: Object) => void.
const onChange = (newBorders) => setBorders(newBorders);
popoverPlacement
- Описание: Положение всплывающих подсказок относительно кнопки. Возможные значения:
'top','right','bottom','left'с модификаторами-startи-end. - Тип:
string. - Пример:
'bottom-end'.
popoverOffset
- Описание: Расстояние между всплывающей подсказкой и элементом управления.
- Тип:
number.
size
- Описание: Размер контрола.
- Тип:
string. - Значение по умолчанию:
default. - Допустимые значения:
'default','__unstable-large'.
value
- Описание: Объект с текущими параметрами границы. Может быть «плоским» или «разделенным» по сторонам.
- Тип:
Object.
const flatBorder = { color: '#007bff', style: 'solid', width: '1px' };
const splitBorders = {
top: { color: '#007bff', style: 'solid', width: '2px' },
right: { color: '#ff4500', style: 'dashed', width: '3px' },
bottom: { color: '#32cd32', style: 'solid', width: '1px' },
left: { color: '#808080', style: 'dotted', width: '2px' },
};
__next40pxDefaultSize
- Описание: Переход к будущему стандарту размера контрола (большему).
- Тип:
boolean. - Значение по умолчанию:
false.
Заключение
Компонент BorderBoxControl предоставляет гибкость и наглядность в настройке границ контейнера, предлагая богатые возможности для кастомизации.