ResizableBox — это компонент из библиотеки @wordpress/components, предоставляющий интерфейс для изменения размеров элементов. Он построен на основе пакета re-resizable и включает дополнительные предустановленные классы и стили, что упрощает использование в проектах WordPress.
Когда использовать ResizableBox
Компонент ResizableBox полезен для создания адаптивных элементов, где пользователь может контролировать размеры, например:
- Изменение ширины и высоты изображений или видео.
- Настройка размеров блоков или контейнеров.
- Управление параметрами ширины и высоты других интерактивных элементов на странице.
Основные возможности ResizableBox
- Динамическое изменение размеров: Можно изменять размеры в любом направлении, используя мышь или сенсорные устройства.
- Ограничения по минимальным и максимальным значениям: Компонент позволяет задать минимальные и максимальные размеры для предотвращения выхода за рамки.
- Управление направлениями изменения размера: Можно активировать изменение размеров только в определенных направлениях, например, только справа или только снизу.
Пример базового использования ResizableBox
Создадим компонент, позволяющий изменять размеры блока в редакторе WordPress:
import { ResizableBox } from '@wordpress/components';
const ResizableImageContainer = (props) => {
const { attributes: { height, width }, setAttributes, toggleSelection } = props;
return (
<ResizableBox
size={{ height, width }}
minHeight="100"
minWidth="100"
maxHeight="500"
maxWidth="500"
enable={{
top: false,
right: true,
bottom: true,
left: false,
topRight: false,
bottomRight: true,
bottomLeft: false,
topLeft: false,
}}
onResizeStart={() => toggleSelection(false)}
onResizeStop={(event, direction, elt, delta) => {
setAttributes({
height: height + delta.height,
width: width + delta.width,
});
toggleSelection(true);
}}
/>
);
};
Описание параметров (Props)
Рассмотрим основные параметры, которые поддерживает компонент ResizableBox.
- size:
object
Устанавливает начальные значения высоты и ширины компонента. Эти значения можно задавать как в пикселях, так и в процентах.- height: Начальная высота элемента.
- width: Начальная ширина элемента.
Обязательный: Нет.
Пример:{ height: 200, width: 300 }.
- minHeight:
number | string
Минимальная высота элемента. Можно задать как числом (в пикселях), так и строкой с указанием единиц.
Обязательный: Нет.
Пример:"100"или100. - minWidth:
number | string
Минимальная ширина элемента.
Обязательный: Нет.
Пример:"100"или100. - maxHeight:
number | string
Максимальная высота элемента.
Обязательный: Нет.
Пример:"500"или500. - maxWidth:
number | string
Максимальная ширина элемента.
Обязательный: Нет.
Пример:"500"или500. - enable:
object
Определяет, какие стороны элемента можно изменять. Это объект с ключами, которые обозначают каждую сторону или угол:top,right,bottom,left,topRight,bottomRight,bottomLeft,topLeft. Значениеtrueпозволяет изменение размера с данной стороны,false— запрещает. Обязательный: Нет.
Пример:
enable={{
top: false,
right: true,
bottom: true,
left: false,
topRight: false,
bottomRight: true,
bottomLeft: false,
topLeft: false,
}}
- onResizeStart:
function
Функция обратного вызова, вызываемая при начале изменения размера. Полезно для временной блокировки выбора других элементов в редакторе WordPress.
Обязательный: Нет.
Пример:() => toggleSelection(false). - onResizeStop:
function
Функция обратного вызова, вызываемая по завершении изменения размера. Она получает параметрыevent,direction,elt, иdelta, гдеdelta— объект с информацией о изменении ширины и высоты.
Обязательный: Нет.
Пример:
(event, direction, elt, delta) => {
setAttributes({
height: height + delta.height,
width: width + delta.width,
});
toggleSelection(true);
}
- showHandle:
boolean
Определяет, будут ли видимы элементы управления размером.
Обязательный: Нет.
По умолчанию:false.
Расширенный пример с дополнительными настройками
Добавим настройку для максимальных размеров и изменим цвета рамки.
import { ResizableBox } from '@wordpress/components';
import { useState } from 'react';
const ResizableTextBox = () => {
const [size, setSize] = useState({ width: 300, height: 150 });
return (
<ResizableBox
size={size}
minHeight="100"
minWidth="150"
maxHeight="600"
maxWidth="600"
enable={{
top: false,
right: true,
bottom: true,
left: false,
bottomRight: true,
}}
style={{
border: "1px solid #007cba",
padding: "10px",
backgroundColor: "#f0f0f0",
textAlign: "center",
}}
onResizeStop={(event, direction, elt, delta) => {
setSize({
width: size.width + delta.width,
height: size.height + delta.height,
});
}}
>
Изменяемый текстовый блок
</ResizableBox>
);
};
Советы по использованию
- Используйте ограничения размера: Указывайте
minWidth,minHeight,maxWidthиmaxHeight, чтобы пользователь не мог задавать экстремальные значения размеров, которые могут нарушить макет. - Управление видимостью элементов: Используйте
showHandle, если хотите, чтобы элементы управления отображались или скрывались в зависимости от состояния вашего интерфейса. - Изменение размеров только в нужных направлениях: Устанавливайте флаги в
enable, чтобы ограничить изменение размера определенными сторонами, улучшая управление элементом.
Заключение
Компонент ResizableBox предоставляет гибкие возможности для управления размерами элементов в WordPress, позволяя пользователю изменять размеры блоков в реальном времени. Этот компонент особенно полезен для создания адаптивных и интерактивных интерфейсов в редакторе WordPress.