页内容器卡片，提供标准卡片样式，卡片切分以及栅格布局能力。ProCard 创造性地将 Col, Row, Card, Tabs 等组件实现结合在一起，让你仅用一个组件就能够完成卡片相关的各种布局。
StatisticCard 指标卡组件，他是 ProCard 的进一步封装。ProCard，注意需要透出 isProCard=true 的静态属性让 ProCard 可以识别为同一个元素。当单独使用时 ProCard 就是一个普通的卡片。
当嵌套子卡片时, 组件会自动切换为 flex 弹性盒布局，你可以将 direction设置为column来指定 Flex 方向，你还可以通过配置 ghost 属性为 true 来去掉背景色和 padding 方便页内布局。
colSpan 支持 antd 定义的栅格式响应布局。预设六个响应尺寸：xs sm md lg xl xxl。如果要支持响应式，可以写成 { xs: 4, sm: 8, md: 10, lg: 12 }。
布局模式下通过配置 split 可以方便地切分卡片，可以进行任意的分栏，不管是横切还是竖切都非常便利，切分出来的分栏仍然保有卡片的特性，高度自动撑满。注意：
padding 会被设置为 0。border-radius会被设置为 0。通过卡片切分能力我们很容易实现左右分栏的效果，很适合左侧是列表，右侧是详情的结构。
通过卡片切分能力我们可以实现更加复杂的数据展现形式。
栅格常常需要和间隔进行配合，你可以使用 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)，如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距][16, { xs: 8, sm: 16, md: 24, lg: 32 }]。
默认卡片布局不可换行，你可以配置 wrap 为 true 来让多个卡片之间可以换行，适用于多个卡片排版的情况。
你可以嵌套卡片组件来将内容分组, 以及 Divider 子组件来分隔这些内容。
当添加分隔线时会自动增加标题的高度与内容区域分开。
collapsible 来配置卡片是否可折叠，通过 defaultCollapsed 属性配置是否默认折叠。collapsed 属性受控进行自定义。配合 ghost幽灵模式和可折叠能力可以实现卡片组展开。
配置 layout 属性为 center 控制内容垂直居中，设置居中时内容部分转为 flex 布局，可以使用 direction 控制 flex 方向。
配置 loading属性为true控制卡片加载中，也可以传入 DOM 给loading来自定义 loading 展示。
配置 actions 属性来配置卡片操作项。
头部没有内容时会自动隐藏。
配置 bordered 属性控制是否卡片带边框。
配置 tabs 属性配合 ProCard.TabPane 子组件可以配置卡片的标签栏。
配置 tab 的 type 为 card 来配置卡片式页签。
可以放在卡片内部，展示多层级结构的信息。
Steps 组件结合 ProCard 组件完成竖向步骤示例。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 标题 | React.ReactNode | - | |
| subTitle | 副标题 | React.ReactNode | - | |
| tooltip | 标题右侧图标 hover 提示信息 | string | - | |
| headStyle | 标题的 style 样式 | CSSProperties | - | |
| bodyStyle | 内容区的 style 样式 | CSSProperties | - | |
| extra | 右上角自定义区域 | React.ReactNode | - | |
| layout | 内容布局，支持垂直居中 | default | center | default | |
| loading | 加载中，支持自定义 loading 样式 | boolean | ReactNode | false | |
| colSpan | 栅格布局宽度，24 栅格，支持指定宽度 px 或百分比, 支持响应式的对象写法 { xs: 8, sm: 16, md: 24}, 仅在嵌套的子卡片上设置有效。 | number | string | 24 | |
| gutter | 数字或使用数组形式同时设置 [水平间距, 垂直间距], 支持响应式的对象写法 { xs: 8, sm: 16, md: 24} | number | array | 0 | |
| split | 拆分卡片的方向 | vertical | horizontal | - | |
| type | 卡片类型 | inner | default | - | |
| size | 卡片尺寸 | default | small | - | |
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | |
| direction | 指定 Flex 方向，仅在嵌套子卡片时有效，默认方向为 row 横向 | column | - | |
| wrap | 是否支持换行，仅在嵌套子卡片时有效 | false | - | 1.12.0 |
| bordered | 是否有边框 | boolean | false | |
| ghost | 幽灵模式，即是否取消卡片内容区域的 padding 和 卡片的背景颜色。 | boolean | false | |
| headerBordered | 页头是否有分割线 | boolean | false | |
| collapsed | 受控属性，是否折叠 | boolean | false | |
| collapsible | 配置是否可折叠，受控时无效 | boolean | false | |
| collapsibleIconRender | 替换默认折叠图标 | ({ collapsed }: { collapsed: boolean }) => React.ReactNode | - | |
| defaultCollapsed | 默认折叠, 受控时无效 | boolean | false | |
| onCollapse | 收起卡片的事件，受控时无效 | (collapsed: boolean) => void | - | |
| tabs | 标签页配置 | 见下面 ProCardTabs | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| activeKey | 当前选中项 | string | - |
| type | 页签的基本样式，可选 line、card、editable-card 类型 | string | inline |
| onChange | 回调 | (activeKey: string) => void; | - |
| items | 基于 antd 拓展的页签的基本配置，必填 | ItemsProps | - |
支持 Tabs 下页签的所有属性。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cardProps | ProCard 卡片属性透传 | ProCard | - |
用于在将内容进行分组时进行分隔。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 分隔类型 | horizontal | vertical | - |
属性同 ProCard，会取消卡片内容边距，用于将多个卡片进行分组。