Card卡片
Card
卡片
通用卡片容器。
使用import{ Card }from"antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
包含标题、内容、操作区域。
Card content
Card content
Card content
在灰色背景上使用无边框的卡片。
Card content
Card content
Card content
只包含内容区域。
可以利用 Card.Meta 支持更灵活的内容。
在系统概览页面常常和栅格进行配合。
数据读入前会有文本块样式。
一种常见的卡片内容区隔模式。
可以放在普通卡片内部，展示多层级结构的信息。
content1
app content
可承载更多内容。
一种支持封面、头像、标题和描述信息的卡片。
Card content
Card content
Card content
Card content
Card content
Card content
Component Token Debug.
通用属性参考：通用属性
<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 | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 |
| 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 |
| tabsMarginBottom | 内置标签页组件下间距 | number | -17 |
