Card

何时使用 {#when-to-use}

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

代码演示 {#examples}

<code src="./demo/basic.tsx">典型卡片</code> <code src="./demo/border-less.tsx" background="grey">无边框</code> <code src="./demo/simple.tsx">简洁卡片</code> <code src="./demo/flexible-content.tsx">更灵活的内容展示</code> <code src="./demo/in-column.tsx" background="grey">栅格卡片</code> <code src="./demo/loading.tsx">预加载的卡片</code> <code src="./demo/grid-card.tsx">网格型内嵌卡片</code> <code src="./demo/inner.tsx">内部卡片</code> <code src="./demo/tabs.tsx">带页签的卡片</code> <code src="./demo/meta.tsx">支持更多内容配置</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/no-body-debug.tsx" debug>封面和操作区不渲染 body</code> <code src="./demo/component-token.tsx" debug>组件 Token</code>

API

通用属性参考：通用属性

jsx

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

参数	说明	类型	默认值	版本
actions	卡片操作组，位置在卡片底部	Array<ReactNode>	-
activeTabKey	当前激活页签的 key	string	-
~~bordered~~	是否有边框, 请使用 `variant` 替换	boolean	true
~~bodyStyle~~	卡片内容区域样式，请使用 `styles.body` 替代	CSSProperties	-	-
variant	形态变体	`outlined` \| `borderless` \|	`outlined`	5.24.0
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
cover	卡片封面	ReactNode	-
defaultActiveTabKey	初始化选中页签的 key，如果没有设置 activeTabKey	string	`第一个页签的 key`
extra	卡片右上角的操作区域	ReactNode	-
hoverable	鼠标移过时可浮起	boolean	false
~~headStyle~~	卡片头部样式，请使用 `styles.header` 替代	CSSProperties	-	-
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false
size	card 的尺寸	`medium` \| `small`	`medium`
tabBarExtraContent	tab bar 上额外的元素	ReactNode	-
tabList	页签标题列表	TabItemType[]	-
tabProps	Tabs	-	-
title	卡片标题	ReactNode	-
type	卡片类型，可设置为 `inner` 或不设置	string	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
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.Meta

主题变量（Design Token）{#design-token}