CardMedia — это компонент WordPress для отображения медиаконтента в карточке (Card). Он предоставляет контейнер для полноэкранного отображения, поддерживая изображения, видео или фоновый цвет, и автоматически адаптируется к стилю карточки. Этот компонент идеально подходит для добавления визуального контента, который привлекает внимание и дополняет текстовые блоки в Card.
Базовый пример использования
Компонент CardMedia можно встроить в карточку, добавив изображение в качестве основного визуального элемента. Вот простой пример:
import { Card, CardBody, CardMedia } from '@wordpress/components';
const BasicCardMediaExample = () => (
<Card>
<CardMedia>
<img src="https://example.com/image.jpg" alt="Пример изображения" />
</CardMedia>
<CardBody>
Это текстовый блок после изображения.
</CardBody>
</Card>
);
Позиционирование компонента CardMedia
Компонент CardMedia может быть размещён в любом порядке в карточке или даже быть единственным дочерним компонентом внутри Card. Стили CardMedia автоматически применяют закругление углов ко всем внутренним элементам, обеспечивая единство визуального стиля.
Пример использования CardMedia с видео
Кроме изображений, CardMedia может быть использован для отображения видео. В этом случае добавьте HTML-тег <video> внутри CardMedia:
import { Card, CardBody, CardMedia } from '@wordpress/components';
const VideoCardExample = () => (
<Card>
<CardMedia>
<video controls>
<source src="https://example.com/video.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
</CardMedia>
<CardBody>
Это карточка с видео и текстовым описанием.
</CardBody>
</Card>
);
Фоновый цвет для CardMedia
Иногда можно использовать CardMedia для добавления фонового цвета вместо изображения или видео, что позволяет акцентировать внимание на тексте. Пример с использованием фонового цвета:
import { Card, CardBody, CardMedia } from '@wordpress/components';
const BackgroundColorExample = () => (
<Card>
<CardMedia style={{ backgroundColor: '#ffcc00', height: '150px' }} />
<CardBody>
Карточка с цветным фоном в верхней части.
</CardBody>
</Card>
);
Расширенное использование CardMedia с CardHeader и CardFooter
CardMedia отлично сочетается с другими компонентами карточки, такими как CardHeader и CardFooter. Это позволяет создавать более сложные и привлекательные карточки.
import { Card, CardHeader, CardBody, CardMedia, CardFooter } from '@wordpress/components';
const FullFeaturedCardExample = () => (
<Card>
<CardHeader>Заголовок карточки</CardHeader>
<CardMedia>
<img src="https://example.com/another-image.jpg" alt="Полноразмерное изображение" />
</CardMedia>
<CardBody>
Контент карточки с изображением и дополнительными компонентами.
</CardBody>
<CardFooter>
Нижняя часть карточки
</CardFooter>
</Card>
);
Использование нескольких элементов в CardMedia
Внутри CardMedia можно добавлять несколько элементов, таких как наложенный текст поверх изображения. Например:
import { Card, CardMedia, CardBody } from '@wordpress/components';
const OverlayTextExample = () => (
<Card>
<CardMedia style={{ position: 'relative', height: '200px' }}>
<img src="https://example.com/overlay-image.jpg" alt="Изображение с наложением" style={{ width: '100%', height: '100%' }} />
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', color: '#fff', backgroundColor: 'rgba(0, 0, 0, 0.5)', padding: '10px' }}>
Наложенный текст
</div>
</CardMedia>
<CardBody>
Карточка с наложением текста на изображение.
</CardBody>
</Card>
);
Заключение
Компонент CardMedia — это мощный инструмент для отображения полноразмерного визуального контента в карточке WordPress. Благодаря поддержке изображений, видео и фонов, он легко адаптируется под нужды проекта. В комбинации с другими компонентами, такими как CardHeader и CardFooter, CardMedia позволяет создавать сложные и информативные карточки, усиливая визуальную привлекательность и улучшая пользовательский опыт.