卡片页脚

CardFooter 在 Card 内渲染一个可选的页脚。

用法

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

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

Flex

底层，CardFooter 使用了 Flex 布局组件。这改善了组件内子项的对齐方式。

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

const Example = () => (
    <Card>
        <CardBody>...</CardBody>
        <CardFooter>
            <FlexBlock>内容</FlexBlock>
            <FlexItem>
                <Button>操作</Button>
            </FlexItem>
        </CardFooter>
    </Card>
);

有关布局组成的更多详细信息，请查看 文档 中关于 Flex 的部分。

属性

注意：此组件与 Card 的 Context 相连。size 和 isBorderless 属性的值源自 Card 父组件（如果存在）。直接在此组件上设置这些属性将覆盖任何派生值。

isBorderless: boolean

无边框渲染。

• 必需：否
• 默认值：false

isShady: boolean

带浅灰色背景渲染。

• 必需：否
• 默认值：false

justify: CSSProperties[ ‘justifyContent’ ]

请参阅 Flex 组件 的 justify 属性文档。

size: string | object

确定组件内的填充量。可以指定为单个尺寸令牌或对象。

• 必需：否
• 默认值：medium
• 允许的值：
• 单个尺寸令牌：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';
  }