卡片 Card
通用卡片容器，用于展示结构化内容。
何时使用
- 需要展示结构化的信息块
- 需要分组展示相关内容
- 需要在页面中组织内容布局
代码演示
基础用法
最简单的卡片用法，只包含内容区域。
正在加载组件...
带标题的卡片
使用 CardHeader 组件添加标题。
正在加载组件...
带额外操作的卡片
在 CardHeader 中使用 extra 属性添加额外操作。
正在加载组件...
带底部的卡片
使用 CardFooter 组件添加底部操作区域。
正在加载组件...
完整卡片
包含头部、正文和底部的完整卡片结构。
正在加载组件...
API
Card
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 子元素 | ReactNode | - |
CardHeader
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | ReactNode | - |
| extra | 右侧额外内容 | ReactNode | - |
| children | 子元素 | ReactNode | - |
CardBody
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 子元素 | ReactNode | - |
CardFooter
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 子元素 | ReactNode | - |