云策 WordPress 开发者社区

块编辑器开发文档

CardFooter

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

概述

CardFooter 是 WordPress 组件库中的一个 React 组件，用于在 Card 内渲染可选页脚。它基于 Flex 布局组件构建，支持灵活的子项对齐。

关键要点

  • CardFooter 作为 Card 的子组件使用，需从 '@wordpress/components' 导入。
  • 内部使用 Flex 布局，可通过 FlexBlock 和 FlexItem 等子组件优化内容对齐。
  • 组件属性（如 size 和 isBorderless）可从 Card 父组件通过 Context 继承，也可直接设置以覆盖继承值。
  • 主要属性包括 isBorderless（无边框）、isShady（浅灰色背景）、justify（对齐方式）和 size（内边距大小）。

代码示例

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

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

注意事项

size 属性可接受单个尺寸令牌（如 'medium'）或对象形式，以分别设置不同方向的内边距。建议参考 Flex 组件文档以了解更多布局细节。

📄 原文内容

CardFooter renders an optional footer within a Card.

Usage

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

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

Flex

Underneath, CardFooter uses the Flex layout component. This improves the alignment of child items within the component.

import {
    Button,
    Card,
    CardFooter,
    FlexItem,
    FlexBlock,
} from '@wordpress/components';

const Example = () => (
    <Card>
        <CardBody>...</CardBody>
        <CardFooter>
            <FlexBlock>Content</FlexBlock>
            <FlexItem>
                <Button>Action</Button>
            </FlexItem>
        </CardFooter>
    </Card>
);

Check out the documentation on Flex for more details on layout composition.

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

justify: CSSProperties[ 'justifyContent' ]

See the documentation for the justify prop for the Flex component

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