ProCard

In-page container cards that provide standard card styles, card segmentation and grid layout capabilities. ProCard creatively combines Col, Row, Card, Tabs and other component implementations together, allowing you to complete various card-related layouts with only one component.

  • If you also need to use it with the chart, you can refer to the StatisticCard indicator card component, which is a further package of ProCard.
  • If you also need to encapsulate ProCard, note that you need to expose the static property of isProCard=true so that ProCard can be recognized as the same element.

When to use

  • When a standard card is required to hold the content.
  • When multiple card grids are required, gutter layout.
  • When in-card split layout is required.
  • When the card is required to be foldable.

Code demo

Basic Card

When used alone a ProCard is just a regular card.

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

Grid layout

When nesting child cards, the component will automatically switch to flex flex box layout, you can set direction to column to specify the flex direction, you can also configure the ghost property to true to remove Background color and padding facilitate in-page layout.

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

Responsive

colSpan supports Grid Responsive Layout defined by antd. There are six preset response sizes: xs sm md lg xl xxl. If you want to support responsiveness, you can write { xs: 4, sm: 8, md: 10, lg: 12 }.

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

Card segmentation

In layout mode, by configuring split, you can easily split the card, and you can make any column, whether it is horizontal or vertical cutting, it is very convenient, the split column still retains the characteristics of the card, and the height is automatically filled. Notice:

  • The content padding of the parent card will be set to 0 when splitting.
  • border-radius of subcards will be set to 0 when splitting.
左右分栏带标题
2019年9月28日
左侧详情
左侧内容
流量占用情况
右侧内容

Left and right columns

Through the card segmentation ability, we can easily achieve the effect of left and right columns, which is very suitable for the structure of the list on the left and the details on the right.

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

Complex segmentation

Through the card segmentation capability, we can achieve more complex data presentation forms.

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

Grid interval

The grid often needs to cooperate with the interval. You can use the gutter property. We recommend using (16+8n)px as the grid interval (n is a natural number). If you want to support responsiveness, you can write it as { xs: 8, sm: 16, md: 24, lg: 32 }. If vertical spacing is required, it can be written in array form [horizontal spacing, vertical spacing][16, { xs: 8, sm: 16, md: 24, lg: 32 }].

title
300px
Auto
Responsive
Responsive
Responsive
Auto
Auto
Auto

Multi-Line Cards

The default card layout does not wrap, you can configure wrap to true to enable line wrapping between multiple cards, which is suitable for multiple card layouts.

换行
Col
Col
Col
Col

group display

You can nest card components to group content, and Divider subcomponents to separate those content.

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

Title with dividing line

When adding a divider it automatically increases the height of the header to separate it from the content area.

标题
extra
内容

Collapsible

  • You can use collapsible to configure whether the card is collapsible or not, and configure whether the card is collapsed by default through the defaultCollapsed property.
  • Or you can customize it by controlling the collapsed property.
可折叠
内容
可折叠-受控自定义
内容
收起 - 可折叠-图标自定义
内容

Deck expansion

With the ghost ghost mode and collapsible ability, the card deck can be expanded.

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

Content centered

Configure the layout property to center to control the vertical centering of the content. When setting the centering, the content part is converted to a flex layout. You can use direction to control the flex direction.

标题
extra
123
456

Loading

Configure the loading property to true to control the loading of the card. You can also pass the DOM to loading to customize the loading display.