Card卡片
Card
卡片
通用卡片容器。
使用import{ Card }from"antd"; |
何时使用
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
代码演示
包含标题、内容、操作区域。
Card title
Card content
Card content
Card content
在灰色背景上使用无边框的卡片。
Card content
Card content
Card content
只包含内容区域。
可以利用 Card.Meta 支持更灵活的内容。
Card title
Card content
Card title
Card content
Card title
Card content
在系统概览页面常常和栅格进行配合。
数据读入前会有文本块样式。
Card Title
Content
Content
Content
Content
Content
Content
Content
一种常见的卡片内容区隔模式。
可以放在普通卡片内部，展示多层级结构的信息。
Card title
tab1
tab2
content1
article
app
project
app content
可承载更多内容。
一种支持封面、头像、标题和描述信息的卡片。
API
通用属性参考：通用属性
<Card title="卡片标题">卡片内容</Card>
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | |
| activeTabKey | 当前激活页签的 key | string | - | |
| bordered | 是否有边框 | boolean | true | |
| 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 | - |
Card.Grid
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| className | 网格容器类名 | string | - | |
| hoverable | 鼠标移过时可浮起 | boolean | true | |
| style | 定义网格容器类名的样式 | CSSProperties | - |
Card.Meta
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| avatar | 头像/图标 | ReactNode | - | |
| className | 容器类名 | string | - | |
| description | 描述内容 | ReactNode | - | |
| style | 定义容器类名的样式 | CSSProperties | - | |
| title | 标题内容 | ReactNode | - |
Semantic DOM
Card title
More
header
5.14.0设置卡片头部区域title
5.14.0设置卡片标题extra
5.14.0设置卡片右上角的操作区域cover
5.14.0设置标题封面body
5.14.0设置卡片内容区域actions
5.14.0设置卡片底部操作组
主题变量（Design Token）
组件 Token如何定制？
| 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 |