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 展示。

自定义 Loading
extra
加载中

操作项

配置 actions 属性来配置卡片操作项。

Actions 操作项
Card content
Card content
Card content

无标题

头部没有内容时会自动隐藏。

内容

带边框

配置 bordered 属性控制是否卡片带边框。

标题
extra
内容

浮出效果

内容
浮出效果

通过 hoverable 配置浮出效果

页签

配置 tabs 属性配合 ProCard.TabPane 子组件可以配置卡片的标签栏。

Tab position:
top
内容二

卡片式页签

配置 tab 的 type 为 card 来配置卡片式页签。

内容一

内部卡片

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

横向内部卡片
内部卡片标题
内部卡片内容
内部卡片标题
内部卡片内容
竖向内部卡片
内部卡片标题
内部卡片内容
内部卡片标题
内部卡片内容

竖向步骤示例

Steps 组件结合 ProCard 组件完成竖向步骤示例。

1
填写基本信息
2
配置模板
3
配置访问
4
配置部署和调度
5
预览
流量占用情况

API

参数说明类型默认值版本
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 | ReactNodefalse
colSpan栅格布局宽度,24 栅格,支持指定宽度 px 或百分比, 支持响应式的对象写法 { xs: 8, sm: 16, md: 24}, 仅在嵌套的子卡片上设置有效。number | string24
gutter数字或使用数组形式同时设置 [水平间距, 垂直间距], 支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number | array0
split拆分卡片的方向vertical | horizontal -
type卡片类型inner | default-
size卡片尺寸default | small-
actions卡片操作组,位置在卡片底部Array<ReactNode>-
direction指定 Flex 方向,仅在嵌套子卡片时有效,默认方向为 row 横向column-
wrap是否支持换行,仅在嵌套子卡片时有效false-1.12.0
bordered是否有边框booleanfalse
ghost幽灵模式,即是否取消卡片内容区域的 padding 和 卡片的背景颜色。booleanfalse
headerBordered页头是否有分割线booleanfalse
collapsed受控属性,是否折叠booleanfalse
collapsible配置是否可折叠,受控时无效booleanfalse
collapsibleIconRender替换默认折叠图标({ collapsed }: { collapsed: boolean }) => React.ReactNode-
defaultCollapsed默认折叠, 受控时无效booleanfalse
onCollapse收起卡片的事件,受控时无效(collapsed: boolean) => void-
tabs标签页配置见下面 ProCardTabs-

ProCardTabs

参数说明类型默认值
activeKey当前选中项string-
type页签的基本样式,可选 line、card、editable-card 类型stringinline
onChange回调(activeKey: string) => void;-
items基于 antd 拓展的页签的基本配置,必填ItemsProps-
  • 更多属性见 antd Tab API 描述。

ItemsProps

支持 Tabs 下页签的所有属性。

参数说明类型默认值
cardPropsProCard 卡片属性透传ProCard-

ProCard.TabPane

该参数即将被 Items 所平替,请及时更新使用 ItemsProps 配置新的内容

参数说明类型默认值
key对应 activeKey,用于标定是否选中和 dom 更新,一定不要重复,不然会造成表现异常string-
tab选项卡头显示文字ReactNode-
disabled不可用booleanfalse
cardPropsProCard 卡片属性透传ProCard-

ProCard.Divider

用于在将内容进行分组时进行分隔。

参数说明类型默认值
type分隔类型horizontal | vertical-

ProCard.Group

属性同 ProCard,会取消卡片内容边距,用于将多个卡片进行分组。