云策 WordPress 开发者社区

块编辑器开发文档

CardHeader

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

概述

CardHeader 是 WordPress 组件库中的一个 React 组件，用于在 Card 内渲染可选头部。它继承 Card 的上下文属性，支持自定义边框、背景和内边距。

关键要点

  • CardHeader 作为 Card 的子组件使用，需从 '@wordpress/components' 导入。
  • 组件通过 Card 的 Context 自动获取 size 和 isBorderless 属性，但可直接设置以覆盖继承值。
  • 支持 isBorderless（无边框）、isShady（浅灰背景）和 size（内边距大小）等 props，均为可选。
  • size 属性可接受字符串（如 'medium'）或对象形式，以精细控制各方向内边距。

代码示例

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

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

注意事项

  • CardHeader 的 size 和 isBorderless 属性默认从父 Card 组件派生，直接设置会覆盖派生值。
  • size 属性允许使用预定义尺寸令牌或对象配置，确保值在允许范围内。
📄 原文内容

CardHeader renders an optional header within a Card.

Usage

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

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

Props

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

isBorderless: boolean

Renders without a border.

  • 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';
}