云策 WordPress 开发者社区

块编辑器开发文档

CardMedia

查看官方原文 ↗
💡 云策文档标注

概述

CardMedia 是 WordPress 组件库中的一个容器组件，用于在 Card 内承载全出血内容，如图像、视频或背景色。它作为 Card 的直接子组件使用，自动处理内部媒体元素的样式。

关键要点

  • CardMedia 用于包裹 Card 中的全出血内容，如 <img> 或视频元素。
  • 它必须作为 Card 的直接子组件放置，可以位于 CardBody 之前或之后，或作为唯一子组件。
  • 样式会自动圆角化内部媒体元素，确保视觉一致性。

代码示例

import { Card, CardBody, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardMedia>
            <img src="..." />
        </CardMedia>
        <CardBody>...</CardBody>
    </Card>
);
📄 原文内容

CardMedia provides a container for full-bleed content within a Card, such as images, video, or even just a background color.

Usage

import { Card, CardBody, CardMedia } from '@wordpress/components';

const Example = () => (
    <Card>
        <CardMedia>
            <img src="..." />
        </CardMedia>
        <CardBody>...</CardBody>
    </Card>
);

Placement

CardMedia can be placed in any order as a direct child of a Card (it can also exist as the only child component). The styles will automatically round the corners of the inner media element.