ProCard 高级卡片

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

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

何时使用

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

代码演示

基础卡片

当单独使用时 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 组件完成竖向步骤示例。

API

参数说明类型默认值版本
title标题React.ReactNode-
subTitle副标题React.ReactNode-
tooltip标题右侧图标 hover 提示信息string-
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
defaultCollapsed默认折叠, 受控时无效booleanfalse
onCollapse收起卡片的事件,受控时无效(collapsed: boolean) => void-
tabs标签页配置见下面 ProCardTabs-

ProCardTabs

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

ProCard.TabPane

支持 Tabs.TabPane 的所有属性。

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

ProCard.Divider

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

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

ProCard.Group

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