ResponsiveWrapper — это компонент из библиотеки @wordpress/components, который поддерживает пропорции содержимого при изменении размера родительского элемента. Это удобно, если необходимо динамически подгонять размер изображения или другого элемента, сохраняя его соотношение сторон.
Основные возможности ResponsiveWrapper
Компонент ResponsiveWrapper особенно полезен, когда нужно обернуть изображение или SVG, чтобы оно адаптировалось к размеру родительского элемента, сохраняя исходное соотношение сторон.
Базовое использование ResponsiveWrapper
В этом примере создается элемент с изображением, которое будет поддерживать свои пропорции при изменении размеров:
import { ResponsiveWrapper } from '@wordpress/components';
const MyResponsiveImageWrapper = () => (
<ResponsiveWrapper naturalWidth={1920} naturalHeight={1080}>
<img
src="https://example.com/my-image.jpg"
alt="Example Image"
/>
</ResponsiveWrapper>
);
Здесь задается исходная ширина и высота изображения через параметры naturalWidth и naturalHeight, чтобы обеспечить сохранение соотношения сторон.
Использование с SVG
При работе с SVG-элементами важно, чтобы SVG содержал атрибуты viewBox и preserveAspectRatio, так как это позволит ResponsiveWrapper корректно обрабатывать масштабирование. Например:
import { ResponsiveWrapper } from '@wordpress/components';
const MyResponsiveSvgWrapper = () => (
<ResponsiveWrapper naturalWidth={300} naturalHeight={200}>
<svg viewBox="0 0 300 200" preserveAspectRatio="xMidYMid meet">
<circle cx="150" cy="100" r="50" fill="#3498db" />
</svg>
</ResponsiveWrapper>
);
Здесь SVG будет масштабироваться в зависимости от размеров родителя, сохраняя свои пропорции. При работе с SVG также рекомендуется явно указывать naturalWidth и naturalHeight для надежного результата.
Описание параметров (Props)
Рассмотрим все параметры, поддерживаемые компонентом ResponsiveWrapper.
- children:
React.ReactElement
Элемент, который будет обернут компонентомResponsiveWrapper. Обычно это изображение (<img>) или SVG (<svg>).
Обязательный: Да.
Пример:<img src="image.jpg" alt="Example" />. - isInline:
boolean
Если установлено вtrue, компонент обернется вspanвместоdiv. Полезно, если вы хотите, чтобы элемент занимал минимальное пространство в строке.
Обязательный: Нет.
По умолчанию:false.
Пример:isInline={true}. - naturalHeight:
number
Исходная высота элемента, используется для расчета соотношения сторон.
Обязательный: Нет (но рекомендуется для точного расчета пропорций).
Пример:naturalHeight={1080}. - naturalWidth:
number
Исходная ширина элемента, используется для расчета соотношения сторон.
Обязательный: Нет (но рекомендуется для точного расчета пропорций).
Пример:naturalWidth={1920}.
Пример с полной настройкой ResponsiveWrapper
В этом примере используем все параметры, чтобы адаптировать поведение ResponsiveWrapper под различные элементы.
import { ResponsiveWrapper } from '@wordpress/components';
const CustomResponsiveWrapperExample = () => (
<ResponsiveWrapper
naturalWidth={1280}
naturalHeight={720}
isInline={false}
>
<img
src="https://example.com/another-image.jpg"
alt="Another Example"
/>
</ResponsiveWrapper>
);
Полезные советы при использовании ResponsiveWrapper
- Устанавливайте исходные размеры: Параметры
naturalWidthиnaturalHeightпозволяют компоненту рассчитать правильное соотношение сторон. Если пропустить их, компонент может некорректно отображать содержимое. - SVG-элементы: При использовании SVG обязательно указывайте атрибуты
viewBoxиpreserveAspectRatio, чтобы SVG мог корректно масштабироваться. - Инлайн-режим: Если необходимо, чтобы элемент находился в строке, используйте параметр
isInline={true}, чтобыResponsiveWrapperобернул элемент вspan, а не вdiv.
Заключение
ResponsiveWrapper — это мощный компонент, который помогает сохранять соотношение сторон элементов в WordPress, обеспечивая их адаптивность. Будь то изображение или SVG, ResponsiveWrapper упрощает работу с динамическими размерами, сохраняя визуальную целостность элементов.