---
title: Card - 卡片
path: /card
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  title: 数据展示
  path: /dataShow
---

将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。

## 基础卡片

常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。

<code src='./demos/base.tsx'  height='400px'>

## 鼠标悬浮样式

指定 hoverable 来为卡片添加鼠标悬浮样式，同时可以通过样式覆盖来自定义悬浮样式

<code src='./demos/hover.tsx'  height='400px'>

## 无边框卡片

设置参数来使用无边框卡片。

<code src='./demos/noBorder.tsx'  height='400px'>

## 简洁卡片

卡片可以只有内容区域。

<code src='./demos/simple.tsx'  height='400px'>

## 更灵活的内容展示

使用 Card.Meta 支持更加灵活的内容

<code src='./demos/image.tsx'  height='400px'>

## 栅格卡片

在系统概览页面常常和栅格进行配合。

<code src='./demos/grid.tsx'  height='400px'>

## 带底部按钮的卡片

<code src='./demos/footer.tsx'  height='400px'>

## 预加载的卡片

数据读入前会有文本块样式。

<code src='./demos/loading.tsx'  height='400px'>

## 网络型内嵌卡片

通过 Card.Grid 来使用卡片内容区隔模式。

<code src='./demos/inline.tsx'  height='400px'>

## 内部卡片

可以放在普通卡片内部，展示多层级结构的信息。

<code src='./demos/inCard.tsx'  height='400px'>

## API

| 参数                | 说明                                                | 类型                                 | 默认值       | 版本 |
| ------------------- | --------------------------------------------------- | ------------------------------------ | ------------ | ---- |
| skeletonProps       | 骨架屏组件的 props                                  | SkeletonProps                        | -            |      |
| hasSkeletion        | 是否启用骨架屏                                      | boolean                              | false        |      |
| hasSkeletion        | 是否启用骨架屏                                      | boolean                              | false        |      |
| activeTabKey        | 当前激活页签的 key                                  | string                               | -            |      |
| bodyStyle           | 内容区域自定义样式                                  | CSSProperties                        | -            |      |
| bordered            | 是否有边框                                          | boolean                              | true         |      |
| cover               | 卡片封面                                            | ReactNode                            | -            |      |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey     | string                               | `第一个页签` |      |
| extra               | 卡片右上角的操作区域                                | ReactNode                            | -            |      |
| headStyle           | 自定义标题区域样式                                  | CSSProperties                        | -            |      |
| hoverable           | 鼠标移过时可浮起                                    | boolean                              | false        |      |
| loading             | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean                              | false        |      |
| size                | card 的尺寸                                         | 'default' \| 'small'                 | 'default'    |      |
| tabBarExtraContent  | tab bar 上额外的元素                                | ReactNode                            | -            |      |
| tabList             | 页签标题列表                                        | Array<{key: string, tab: ReactNode}> | -            |      |
| tabProps            | Tabs                                                | -                                    | -            |      |
| title               | 卡片标题                                            | ReactNode                            | -            |      |
| type                | 卡片类型，可设置为 inner 或 不设置                  | string                               | -            |      |
| onTabChange         | 页签切换的回调                                      | (key) => void                        | -            |      |
| hoverStyle          | 自定义 hover 样式                                   | CSSProperties                        | -            |      |
| onTabChange         | 页签切换的回调                                      | (key) => void                        | -            |      |
| isBoxShadow         | 是否加入阴影样式                                    | boolean                              | false        |      |

## Card.Grid

| 参数      | 说明                   | 类型          | 默认值 | 版本 |
| --------- | ---------------------- | ------------- | ------ | ---- |
| className | 网格容器类名           | string        | -      |      |
| hoverable | 鼠标移过时可浮起       | boolean       | true   |      |
| style     | 定义网格容器类名的样式 | CSSProperties | -      |      |

## Card.Meta

| 参数        | 说明               | 类型          | 默认值 | 版本 |
| ----------- | ------------------ | ------------- | ------ | ---- |
| avatar      | 头像/图标          | ReactNode     | -      |      |
| description | 描述内容           | ReactNode     | -      |      |
| style       | 定义容器类名的样式 | CSSProperties | -      |      |
| className   | 容器类名           | string        | -      |      |
| title       | 标题               | ReactNode     | -      |      |