Card卡片
Card
卡片
通用卡片容器。
使用import { Card } from "antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
包含标题、内容、操作区域。
Card content
Card content
Card content
在灰色背景上使用无边框的卡片。
Card content
Card content
Card content
只包含内容区域。
可以利用 Card.Meta 支持更灵活的内容。
在系统概览页面常常和栅格进行配合。
数据读入前会有文本块样式。
一种常见的卡片内容区隔模式。
可以放在普通卡片内部，展示多层级结构的信息。
content1
app content
可承载更多内容。
一种支持封面、头像、标题和描述信息的卡片。
通用属性参考：通用属性
<Card title="卡片标题">卡片内容</Card>
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | |
| activeTabKey | 当前激活页签的 key | string | - | |
是否有边框, 请使用 variant 替换 | boolean | true | ||
| variant | 形态变体 | outlined | borderless | | outlined | 5.24.0 |
| cover | 卡片封面 | ReactNode | - | |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
| extra | 卡片右上角的操作区域 | ReactNode | - | |
| hoverable | 鼠标移过时可浮起 | boolean | false | |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
| size | card 的尺寸 | default | small | default | |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
| tabList | 页签标题列表 | TabItemType[] | - | |
| tabProps | Tabs | - | - | |
| title | 卡片标题 | ReactNode | - | |
| type | 卡片类型，可设置为 inner 或 不设置 | string | - | |
| classNames | 配置卡片内置模块的 className | Record<SemanticDOM, string> | - | 5.14.0 |
| styles | 配置卡片内置模块的 style | Record<SemanticDOM, CSSProperties> | - | 5.14.0 |
| onTabChange | 页签切换的回调 | (key) => void | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| className | 网格容器类名 | string | - | |
| hoverable | 鼠标移过时可浮起 | boolean | true | |
| style | 定义网格容器类名的样式 | CSSProperties | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| avatar | 头像/图标 | ReactNode | - | |
| className | 容器类名 | string | - | |
| description | 描述内容 | ReactNode | - | |
| style | 定义容器类名的样式 | CSSProperties | - | |
| title | 标题内容 | ReactNode | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| actionsBg | 操作区背景色 | string | #ffffff |
| actionsLiMargin | 操作区每一项的外间距 | string | 12px 0 |
| bodyPadding | 卡片内边距 | number | 24 |
| bodyPaddingSM | 小号卡片内边距 | number | 12 |
| extraColor | 额外区文字颜色 | string | rgba(0,0,0,0.88) |
| headerBg | 卡片头部背景色 | string | transparent |
| headerFontSize | 卡片头部文字大小 | string | number | 16 |
| headerFontSizeSM | 小号卡片头部文字大小 | string | number | 14 |
| headerHeight | 卡片头部高度 | string | number | 56 |
| headerHeightSM | 小号卡片头部高度 | string | number | 38 |
| headerPadding | 卡片头部内边距 | number | 24 |
| headerPaddingSM | 小号卡片头部内边距 | number | 12 |
| tabsMarginBottom | 内置标签页组件下间距 | number | -17 |
