ant-design/components/card/index.zh-CN.md

category	group	title	subtitle	description	cover	coverDark
Components	数据展示	Card	卡片	通用卡片容器。	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original

何时使用

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

代码演示

典型卡片 无边框 简洁卡片 更灵活的内容展示 栅格卡片 预加载的卡片 网格型内嵌卡片 内部卡片 带页签的卡片 支持更多内容配置 组件 Token

API

通用属性参考：通用属性

<Card title="卡片标题">卡片内容</Card>

Card

参数	说明	类型	默认值	版本
actions	卡片操作组，位置在卡片底部	Array<ReactNode>	-
activeTabKey	当前激活页签的 key	string	-
bordered	是否有边框	boolean	true
cover	卡片封面	ReactNode	-
defaultActiveTabKey	初始化选中页签的 key，如果没有设置 activeTabKey	string	第一个页签
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, string>	-	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	-

styles 和 classNames 属性

名称	说明	版本
header	设置卡片头部区域	5.14.0
body	设置卡片内容区域	5.14.0
extra	设置卡片右上角的操作区域	5.14.0
title	设置卡片标题	5.14.0
actions	设置卡片底部操作组	5.14.0
cover	设置标题封面	5.14.0

主题变量（Design Token）