云策 WordPress 开发者社区

块编辑器开发文档

CardBody

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

概述

CardBody 是 WordPress 组件库中的一个组件，用于在 Card 内渲染可选的内容区域。它支持多个 CardBody 嵌套使用，并可通过 props 控制滚动、背景和内边距等样式。

关键要点

  • CardBody 是 Card 组件的子组件，用于显示内容区域，可多个同时使用。
  • 组件从 Card 父组件继承 Context，size prop 的值默认从 Card 派生，但可直接设置以覆盖。
  • 主要 props 包括 isScrollable（控制滚动）、isShady（浅灰色背景）和 size（内边距大小）。
  • size prop 可以是单一尺寸令牌（如 'medium'）或对象形式，以精细控制各方向内边距。

代码示例

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

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

注意事项

  • CardBody 与 Card 的 Context 连接，size prop 默认从 Card 父组件派生，直接设置会覆盖派生值。
  • props 均为可选，默认值：isScrollable 为 false，isShady 为 false，size 为 'medium'。
📄 原文内容

CardBody renders an optional content area for a Card. Multiple CardBody components can be used within Card if needed.

Usage

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

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

Props

Note: This component is connected to Card‘s Context. The value of the size prop is derived from the Card parent component (if there is one). Setting this prop directly on this component will override any derived values.

isScrollable: boolean

Determines if the component is scrollable.

  • Required: No
  • Default: false

isShady: boolean

Renders with a light gray background color.

  • Required: No
  • Default: false

size: string | object

Determines the amount of padding within the component. Can be specified either as a single size token or as an object.

  • Required: No
  • Default: medium
  • Allowed values:
  • Single size token: none, xSmall, small, medium, large
  • Object: 
    {
  blockStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
  blockEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
  inlineStart: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
  inlineEnd: 'none' | 'xSmall' | 'small' | 'medium' | 'large';
}