ProCard - 高级卡片

页内容器卡片,提供标准卡片样式,卡片切分以及栅格布局能力。ProCard 创造性地将 Col, Row, Card, Tabs 等组件实现结合在一起,让你仅用一个组件就能够完成卡片相关的各种布局。

  • 如果你还需要结合图表一起使用,可以参考 StatisticCard 指标卡组件,他是 ProCard 的进一步封装。
  • 若您也需要封装 ProCard,注意需要透出 isProCard=true 的静态属性让 ProCard 可以识别为同一个元素。

何时使用

  • 需要一个标准卡片容纳内容时。
  • 需要多个卡片栅格,gutter 布局时。
  • 需要进行卡片内切分布局时。
  • 需要卡片可折叠时。

代码演示

基础卡片

当单独使用时 ProCard 就是一个普通的卡片。

默认尺寸
extra
Card content
Card content
Card content
小尺寸卡片
extra
Card content
Card content
Card content

栅格布局

当嵌套子卡片时, 组件会自动切换为 flex 弹性盒布局,你可以将 direction设置为column来指定 Flex 方向,你还可以通过配置 ghost 属性为 true 来去掉背景色和 padding 方便页内布局。

colSpan - 24
colSpan - 12
colSpan - 8
colSpan - 0
24栅格
colSpan-12
colSpan-6
colSpan-6
colSpan - 200px
Auto
Auto
colSpan - 30%

响应式

colSpan 支持 antd 定义的栅格式响应布局。预设六个响应尺寸:xs sm md lg xl xxl。如果要支持响应式,可以写成 { xs: 4, sm: 8, md: 10, lg: 12 }。

24栅格
Col
Col
Col
指定宽度px
Col
Auto
指定宽度百分比
Auto
Col - 百分比

卡片切分

布局模式下通过配置 split 可以方便地切分卡片,可以进行任意的分栏,不管是横切还是竖切都非常便利,切分出来的分栏仍然保有卡片的特性,高度自动撑满。注意:

  • 切分时父卡片的内容 padding 会被设置为 0。
  • 切分时子卡片的 border-radius会被设置为 0。
左右分栏带标题
2019年9月28日
左侧详情
左侧内容
流量占用情况
右侧内容

左右分栏

通过卡片切分能力我们很容易实现左右分栏的效果,很适合左侧是列表,右侧是详情的结构。

左侧详情
左侧内容
左右分栏子卡片带标题
右侧内容

复杂切分

通过卡片切分能力我们可以实现更加复杂的数据展现形式。

复杂切分
2019年9月28日
昨日全部流量
123
本月累计流量
234
今年累计流量
345
运行中试验
12/56
历史试验总数
134 个
流量趋势
图表
图表
图表
图表
图表
流量占用情况
右侧内容

栅格间隔

栅格常常需要和间隔进行配合,你可以使用 gutter 属性,我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数),如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。如果需要垂直间距,可以写成数组形式 [水平间距, 垂直间距][16, { xs: 8, sm: 16, md: 24, lg: 32 }]。

title
300px
Auto
Responsive
Responsive
Responsive
Auto
Auto
Auto

多行卡片

默认卡片布局不可换行,你可以配置 wrap 为 true 来让多个卡片之间可以换行,适用于多个卡片排版的情况。

换行
Col
Col
Col
Col

分组展示

你可以嵌套卡片组件来将内容分组, 以及 Divider 子组件来分隔这些内容。

核心指标
今日UV
79.00
冻结金额
112,893.00
信息完整度
93/ 100
冻结金额
112,893

标题带分割线

当添加分隔线时会自动增加标题的高度与内容区域分开。

标题
extra
内容

可折叠

  • 你可以使用 collapsible 来配置卡片是否可折叠,通过 defaultCollapsed 属性配置是否默认折叠。
  • 或者你可以通过 collapsed 属性受控进行自定义。
可折叠
内容
可折叠-受控自定义
内容
收起 - 可折叠-图标自定义
内容

卡片组展开

配合 ghost幽灵模式和可折叠能力可以实现卡片组展开。

卡片组展开
卡片内容
卡片内容
卡片内容

内容居中

配置 layout 属性为 center 控制内容垂直居中,设置居中时内容部分转为 flex 布局,可以使用 direction 控制 flex 方向。

标题
extra
123
456

加载中

配置 loading属性为true控制卡片加载中,也可以传入 DOM 给loading来自定义 loading 展示。