ResizeTooltip — это компонент из библиотеки @wordpress/components, который показывает размеры элемента, когда его ширина или высота изменяются. Компонент может быть полезен в WordPress редакторе для наглядного отображения текущих размеров элементов во время их изменения.
Когда использовать ResizeTooltip
Компонент ResizeTooltip идеально подходит для ситуаций, когда нужно показывать размеры элемента во время его редактирования, что особенно полезно для визуальной настройки макета.
Пример базового использования ResizeTooltip
В этом примере создадим элемент с ResizeTooltip, который будет отображать ширину и высоту при изменении размера.
import { ResizeTooltip } from '@wordpress/components';
const ResizableComponent = () => {
return (
<div style={{ position: 'relative', width: '200px', height: '150px', border: '1px solid #007cba' }}>
<ResizeTooltip />
Контент элемента
</div>
);
};
Важно: Родительский элемент, содержащий ResizeTooltip, должен иметь CSS-свойство position, например position: relative. Это необходимо для корректного позиционирования подсказки.
Позиции подсказки
ResizeTooltip поддерживает три варианта позиционирования:
- bottom (по умолчанию) — отображает размеры по центру внизу родительского элемента.
- corner — отображает размеры в верхнем правом углу родительского элемента.
Описание параметров (Props)
Рассмотрим каждый параметр, поддерживаемый компонентом ResizeTooltip.
- axis:
string
Позволяет ограничить отображение размеров по определённой оси. Например, если задано значениеx, то будет отображаться только ширина.
Обязательный: Нет.
Значения:x | y.
Пример:axis="x". - fadeTimeout:
number
Продолжительность (в миллисекундах) перед тем, как подсказка исчезнет после завершения изменения размера.
Обязательный: Нет.
По умолчанию:180.
Пример:fadeTimeout={300}. - isVisible:
boolean
Определяет, можно ли отображать подсказку. Если значение установлено вfalse, то подсказка не будет показана.
Обязательный: Нет.
По умолчанию:true.
Пример:isVisible={true}. - labelRef:
function
Callback-функция для получения ссылки на элемент подсказки. Полезно для получения доступа к самому элементу подсказки для дальнейших манипуляций.
Обязательный: Нет.
Пример:labelRef={(ref) => console.log(ref)}. - onMove:
function
Callback-функция, которая вызывается, когда элемент изменяет размеры, используя событиеmousemove.
Обязательный: Нет.
Пример:onMove={() => console.log("Moving")}. - onResize:
function
Callback-функция, которая вызывается при изменении размеров элемента.
Обязательный: Нет.
Пример:
onResize={(newSize) => console.log("New size:", newSize)}- position:
string
Позиция подсказки относительно родительского элемента.
Обязательный: Нет.
По умолчанию:corner.
Значения:bottom | corner.
Пример:position="bottom". - showPx:
boolean
Отображает суффиксpxпосле значений ширины или высоты в подсказке.
Обязательный: Нет.
По умолчанию:true.
Пример:showPx={false}. - zIndex:
number
Устанавливает значениеz-indexдля элемента подсказки, чтобы контролировать порядок наложения.
Обязательный: Нет.
По умолчанию:1000.
Пример:zIndex={2000}.
Расширенный пример с использованием всех параметров
Теперь рассмотрим пример, где используются все параметры для более детального управления поведением компонента.
import { ResizeTooltip } from '@wordpress/components';
import { useState } from 'react';
const AdvancedResizeTooltipExample = () => {
const [size, setSize] = useState({ width: 200, height: 150 });
return (
<div
style={{
position: 'relative',
width: `${size.width}px`,
height: `${size.height}px`,
border: '2px dashed #8b0000',
backgroundColor: '#f8f9fa',
}}
>
<ResizeTooltip
axis="x"
fadeTimeout={500}
isVisible={true}
labelRef={(ref) => console.log('Label reference:', ref)}
onMove={() => console.log('Resizing with mouse move')}
onResize={(newSize) => setSize(newSize)}
position="bottom"
showPx={true}
zIndex={1050}
/>
Изменяемый блок
</div>
);
};
Советы по использованию ResizeTooltip
- Ограничение по оси: Используйте параметр
axis, если хотите показывать изменения только по ширине (x) или только по высоте (y). - Таймер для исчезновения: Установите параметр
fadeTimeoutдля управления временем отображения подсказки, чтобы избежать излишнего внимания к элементу. - Настройка позиции: В зависимости от макета вашего интерфейса, позиционируйте подсказку либо внизу (
bottom), либо в правом верхнем углу (corner). - zIndex для наложения: Используйте параметр
zIndex, если нужно отобразить подсказку поверх других элементов.
Заключение
Компонент ResizeTooltip предоставляет удобный способ отображения размеров элементов в WordPress, особенно во время динамического изменения размера. Используя параметры ResizeTooltip, можно точно настроить отображение, позиционирование и поведение подсказки в зависимости от требований интерфейса, что позволяет создавать более интуитивные и визуально понятные редакторские элементы.