Card 提供了一个灵活且可扩展的内容容器。

用法

Card 还提供了一组方便的 子组件，例如 CardBody、CardHeader、CardFooter 等（见下文）。

import {
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    __experimentalText as Text,
    __experimentalHeading as Heading,
} from '@wordpress/components';

function Example() {
    return (
        <Card>
            <CardHeader>
                <Heading level={ 4 }>Card Title</Heading>
            </CardHeader>
            <CardBody>
                <Text>Card Content</Text>
            </CardBody>
            <CardFooter>
                <Text>Card Footer</Text>
            </CardFooter>
        </Card>
    );
}

属性

elevation: number

阴影的 elevation 大小，基于 Style 系统的 elevation 系统。这对于突出显示某些内容可能很有帮助。更多信息，请查看 Elevation。

  • 必填：否
  • 默认值：0

isBorderless: boolean

渲染时不带边框。

  • 必填：否
  • 默认值：false

isRounded: boolean

渲染时带有圆角。

  • 必填：否
  • 默认值：true

size: string | object

确定组件内的填充量。可以指定为单个 size token 或对象。

  • 必填：否
  • 默认值：medium
  • 允许的值：
    • 单个 size token：none、xSmall、small、medium、large
    • 对象：
    {
  blockStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
  blockEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
  inlineStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
  inlineEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
}

继承的属性

Card 还继承了所有 Surface props。

子组件

此组件提供了一系列子组件集合，可用于组合各种界面。

子组件示例

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

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

逻辑填充属性

size 属性支持适应不同书写方向的逻辑属性：

  • blockStart – 在水平书写模式下映射为 top
  • blockEnd – 在水平书写模式下映射为 bottom
  • inlineStart – 在水平从左到右书写模式下映射为 left
  • inlineEnd – 在水平从左到右书写模式下映射为 right
import { Card, CardBody } from '@wordpress/components';

const Example = () => (
    <Card
        size={ {
            blockStart: 'large',
            blockEnd: 'small',
            inlineStart: 'medium',
            inlineEnd: 'medium',
        } }
    >
        <CardBody
            size={ {
                blockStart: 'small',
                inlineStart: 'large',
                inlineEnd: 'large',
            } }
        >
            Content with logical padding properties
        </CardBody>
    </Card>
);

上下文

<Card /> 的子组件使用 Context 与 <Card /> 连接。某些属性如 size 和 isBorderless 会传递给部分子组件。

在以下示例中，<CardBody /> 将以 small 的大小渲染：

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

const Example = () => (
    <Card size="small">
        <CardBody>...</CardBody>
    </Card>
);

这些子组件设计得非常灵活。如有需要，子组件可以覆盖 Context 属性。在以下示例中，最后一个 <CardBody /> 将渲染其指定的大小：

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

const Example = () => (
    <Card size="small">
        <CardBody>...</CardBody>
        <CardBody>...</CardBody>
        <CardBody size="large">...</CardBody>
    </Card>
);