Компонент BoxControl в WordPress предназначен для управления значениями сторон элемента, таких как top, right, bottom и left. Его часто используют для настройки отступов (padding) или внешних отступов (margin), позволяя пользователю изменять размеры для каждой стороны элемента отдельно или для всех сторон одновременно.
Пример использования BoxControl
import { useState } from 'react';
import { BoxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const MyBoxControlExample = () => {
const [boxValues, setBoxValues] = useState({
top: '20px',
right: '15%',
bottom: '20px',
left: '15%',
});
const handleBoxChange = (newValues) => setBoxValues(newValues);
return (
<BoxControl
values={boxValues}
onChange={handleBoxChange}
allowReset={true}
splitOnAxis={false}
inputProps={{ min: 0 }}
label={__('Настройки отступов')}
resetValues={{
top: '0px',
right: '0px',
bottom: '0px',
left: '0px'
}}
sides={['top', 'right', 'bottom', 'left']}
units={[
{ value: 'px', label: 'px', default: true },
{ value: '%', label: '%' },
{ value: 'em', label: 'em' }
]}
onMouseOver={() => console.log('Mouse over BoxControl')}
onMouseOut={() => console.log('Mouse out of BoxControl')}
__next40pxDefaultSize={true}
/>
);
};
Описание параметров компонента BoxControl
allowReset
- Описание: Включает кнопку для сброса значений в контроле. Если установлено значение
true, отображается кнопка для сброса. - Тип:
boolean - Значение по умолчанию:
true
splitOnAxis
- Описание: Опция для использования вертикальных и горизонтальных контролов при отключении связи сторон. Полезно для быстрого изменения вертикальных и горизонтальных отступов.
- Тип:
boolean - Значение по умолчанию:
false
inputProps
- Описание: Дополнительные параметры для внутреннего компонента
UnitControl. - Тип:
object - Значение по умолчанию:
{ min: 0 } - Пример:
inputProps={{ min: 5, max: 100 }}
label
- Описание: Метка, отображаемая над контролом. Пользователь может задать собственный текст.
- Тип:
string - Значение по умолчанию:
__('Box Control') - Пример:
label={__('Настройки отступов')}
onChange
- Описание: Функция-обработчик, вызываемая при изменении значений сторон. Получает обновленные значения как аргумент.
- Тип:
(nextValues: BoxControlValue) => void - Пример:
const onChange = (newValues) => setBoxValues(newValues);
resetValues
- Описание: Объект значений для каждой стороны, используемый при сбросе. Значения по умолчанию можно установить для
top,right,bottomиleft. - Тип:
object - Значение по умолчанию:
{ top: undefined, right: undefined, bottom: undefined, left: undefined } - Пример
resetValues={{
top: '10px',
right: '10px',
bottom: '10px',
left: '10px'
}}
sides
- Описание: Массив сторон для управления. Если значение не указано, управление будет доступно для всех сторон. Допустимые значения:
"top","right","bottom","left","vertical", и"horizontal". - Тип:
string[] - Пример
sides={['top', 'right', 'bottom', 'left']}units
- Описание: Массив доступных единиц измерения, совместимых с
UnitControl. Может включатьpx,%,em, и другие. - Тип:
WPUnitControlUnit[] - Пример
units={[
{ value: 'px', label: 'px', default: true },
{ value: '%', label: '%' },
{ value: 'rem', label: 'rem' }
]}
values
- Описание: Текущие значения для каждой стороны (
top,right,bottom,left). Если значение отсутствует, оно считаетсяundefined. - Тип:
object - Пример
const values = { top: '10px', right: '5%', bottom: '10px', left: '5%' };
onMouseOver
- Описание: Обработчик события
onMouseOverдля компонентаBoxControl. - Тип:
function - Пример
onMouseOver={() => console.log('Mouse over BoxControl')}
onMouseOut
- Описание: Обработчик события
onMouseOutдля компонентаBoxControl. - Тип:
function - Пример
onMouseOut={() => console.log('Mouse out of BoxControl')}
__next40pxDefaultSize
- Описание: Включает использование увеличенного размера, который будет применяться по умолчанию в будущих версиях.
- Тип:
boolean - Значение по умолчанию:
false
Заключение
Компонент BoxControl предоставляет гибкость для настройки индивидуальных сторон элемента, что особенно полезно при работе с отступами и размерами элементов в кастомных интерфейсах WordPress. С помощью параметров allowReset, splitOnAxis, и units пользователь может гибко адаптировать компонент под различные задачи и сценарии.