В WordPress компонент BorderControl используется для управления параметрами границы элемента, такими как цвет, стиль и ширина. Он сочетает в себе несколько подкомпонентов, включая BorderDropdown для выбора цвета и стиля, а также UnitControl и RangeControl для настройки ширины границы.
Пример использования BorderControl
import { useState } from 'react';
import { BorderControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
// Задание палитры цветов
const colors = [
{ name: 'Sky Blue', color: '#1E90FF' },
{ name: 'Crimson Red', color: '#DC143C' },
{ name: 'Lime Green', color: '#32CD32' },
{ name: 'Golden Yellow', color: '#FFD700' },
];
const CustomBorderControl = () => {
const [border, setBorder] = useState();
return (
<BorderControl
__next40pxDefaultSize
colors={colors}
label={__('Граница')}
onChange={setBorder}
value={border}
enableAlpha={true}
enableStyle={true}
disableCustomColors={false}
hideLabelFromVision={false}
isCompact={false}
shouldSanitizeBorder={true}
withSlider={true}
size="default"
width="250px"
/>
);
};
Описание параметров компонента BorderControl
colors
- Описание: Массив объектов, описывающих палитру цветов, каждый объект может содержать
nameиcolor. - Тип: Массив объектов
PaletteObjectилиColorObject. - Значение по умолчанию:
[]. - Пример:
const colors = [
{ name: 'Sky Blue', color: '#1E90FF' },
{ name: 'Crimson Red', color: '#DC143C' },
];
disableCustomColors
- Описание: Отключает возможность выбора произвольных цветов, если установлено значение
true. - Тип:
boolean. - Значение по умолчанию:
false.
disableUnits
- Описание: Отключает выбор единиц измерения ширины границы.
- Тип:
boolean.
enableAlpha
- Описание: Включает канал прозрачности (alpha) для выбора цвета.
- Тип:
boolean. - Значение по умолчанию:
true.
enableStyle
- Описание: Позволяет пользователю выбирать стиль границы.
- Тип:
boolean. - Значение по умолчанию:
true.
hideLabelFromVision
- Описание: Скрывает метку компонента, делая её доступной только для экранных ридеров.
- Тип:
boolean.
isCompact
- Описание: Включает компактный режим компонента, ограничивая его ширину.
- Тип:
boolean.
label
- Описание: Текст для метки, которая будет отображаться рядом с компонентом.
- Тип:
string.
onChange
- Описание: Функция-обработчик, вызываемая при изменении значений цвета, стиля или ширины границы.
- Тип:
(value?: Object) => void. - Пример
const onChange = (newBorder) => setBorder(newBorder);
shouldSanitizeBorder
- Описание: Если включено, автоматически очищает стиль границы, если цвет или ширина не заданы, возвращая
undefinedдля границы. - Тип:
boolean. - Значение по умолчанию:
true.
size
- Описание: Определяет размер контрола.
- Тип:
string. - Значение по умолчанию:
default. - Допустимые значения:
'default','__unstable-large'.
value
- Описание: Объект, представляющий текущую конфигурацию границы. Может включать
color,style, иwidth. - Тип:
Object. - Пример
const border = { color: '#1E90FF', style: 'solid', width: '3px' };
width
- Описание: Определяет визуальную ширину компонента
BorderControl. - Тип:
CSSProperties['width']. - Пример:
'250px'.
withSlider
- Описание: Включает
RangeControlдля дополнительного управления шириной границы. - Тип:
boolean.
__next40pxDefaultSize
- Описание: Включает увеличенный размер по умолчанию, который будет использоваться в будущих версиях.
- Тип:
boolean. - Значение по умолчанию:
false.
Заключение
Компонент BorderControl предоставляет удобные возможности для настройки границ, что особенно полезно при создании кастомных интерфейсов в WordPress.