Card卡片
Card
卡片
通用卡片容器。
使用import{ Card }from"antd"; |
何时使用
最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。
代码演示
Card title
Card content
Card content
Card content
Card content
Card content
Card content

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 |