ProCard - 高级卡片

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

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

何时使用

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

基础 ProCard 直接复用 antd Card 的皮肤和 token。未传 variant 时透传给 antd Card，跟随 ConfigProvider 的 card.variant / 全局 variant（与 antd Card 一致），不会在 ProCard 内写死默认值。card.className / style / classNames / styles 同样由底层 Card 合并。仅 ghost、checked、boxShadow 等走 legacy 皮时，边框才由 ProCard 自行解析 ConfigProvider。

代码演示

枚举属性切换

通过 Segmented 分段选择器一键切换 size、variant、layout、type、direction、split、collapsible 七个枚举属性。

枚举属性切换

import { ProCard } from '@ant-design/pro-components';
import { Segmented, Space, theme } from 'antd';
import { useState } from 'react';

const Demo = () => {
  const { token } = theme.useToken();

  const [size, setSize] = useState<'default' | 'small'>('default');
  const [variant, setVariant] = useState<'outlined' | 'borderless'>('outlined');
  const [layout, setLayout] = useState<'default' | 'center'>('default');
  const [type, setType] = useState<'default' | 'inner'>('default');
  const [direction, setDirection] = useState<'row' | 'column'>('row');
  const [split, setSplit] = useState<'vertical' | 'horizontal' | undefined>(
    undefined,
  );
  const [collapsible, setCollapsible] = useState<'icon' | 'header' | false>(
    false,
  );

  return (
    <div>
      <ProCard variant="outlined" style={{ marginBlockEnd: 16 }}>
        <Space orientation="vertical" size={12} style={{ width: '100%' }}>
          <Space>
            <span>size 尺寸：</span>
            <Segmented
              value={size}
              onChange={(v) => setSize(v as any)}
              options={[
                { label: '默认 default', value: 'default' },
                { label: '紧凑 small', value: 'small' },
              ]}
            />
          </Space>
          <Space>
            <span>variant 外观：</span>
            <Segmented
              value={variant}
              onChange={(v) => setVariant(v as any)}
              options={[
                { label: '线框 outlined', value: 'outlined' },
                { label: '无边框 borderless', value: 'borderless' },
              ]}
            />
          </Space>
          <Space>
            <span>layout 内容布局：</span>
            <Segmented
              value={layout}
              onChange={(v) => setLayout(v as any)}
              options={[
                { label: '默认 default', value: 'default' },
                { label: '居中 center', value: 'center' },
              ]}
            />
          </Space>
          <Space>
            <span>type 卡片类型：</span>
            <Segmented
              value={type}
              onChange={(v) => setType(v as any)}
              options={[
                { label: '默认 default', value: 'default' },
                { label: '内嵌 inner', value: 'inner' },
              ]}
            />
          </Space>
          <Space>
            <span>direction 子卡片方向：</span>
            <Segmented
              value={direction}
              onChange={(v) => setDirection(v as any)}
              options={[
                { label: '水平 row', value: 'row' },
                { label: '垂直 column', value: 'column' },
              ]}
            />
          </Space>
          <Space>
            <span>split 分割线：</span>
            <Segmented
              value={split ?? 'none'}
              onChange={(v) => setSplit(v === 'none' ? undefined : (v as any))}
              options={[
                { label: '无', value: 'none' },
                { label: '垂直 vertical', value: 'vertical' },
                { label: '水平 horizontal', value: 'horizontal' },
              ]}
            />
          </Space>
          <Space>
            <span>collapsible 折叠方式：</span>
            <Segmented
              value={collapsible === false ? 'false' : collapsible}
              onChange={(v) =>
                setCollapsible(v === 'false' ? false : (v as any))
              }
              options={[
                { label: '不可折叠', value: 'false' },
                { label: '图标触发 icon', value: 'icon' },
                { label: '标题触发 header', value: 'header' },
              ]}
            />
          </Space>
        </Space>
      </ProCard>

      <ProCard
        title="用户认证服务"
        extra="v2.3.1"
        tooltip="管理用户认证与授权的核心服务"
        size={size}
        variant={variant}
        layout={layout}
        type={type}
        direction={direction}
        split={split}
        gutter={[16, 16]}
        collapsible={collapsible || undefined}
        defaultCollapsed={false}
      >
        <ProCard title="基本信息">
          <div>实例数量：3</div>
          <div>CPU 占用：45%</div>
          <div>内存占用：1.2 GB</div>
        </ProCard>
        <ProCard title="运行状态">
          <div>日均请求：120 万</div>
          <div>平均延迟：18ms</div>
          <div>成功率：99.98%</div>
        </ProCard>
      </ProCard>

      <div
        style={{
          marginBlockStart: 12,
          padding: 12,
          background: token.colorBgTextHover,
          borderRadius: token.borderRadius,
          fontSize: 13,
          color: token.colorTextSecondary,
        }}
      >
        当前配置：size=<b>{size}</b>、variant=<b>{variant}</b>、layout=
        <b>{layout}</b>、type=<b>{type}</b>、direction=<b>{direction}</b>、
        split=<b>{String(split ?? '无')}</b>、collapsible=
        <b>{String(collapsible)}</b>
      </div>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

用户认证服务

实例数量：3

CPU 占用：45%

内存占用：1.2 GB

订单处理中心

v2.3.1

日均订单：52 万

平均延迟：23ms

成功率：99.97%

支付网关

v1.8.0

微信支付：已接入

支付宝：已接入

银联：接入中

基础卡片

import {
  ProCard,
  ProFormGroup,
  ProFormSwitch,
} from '@ant-design/pro-components';

const Demo = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <ProCard
        title="用户认证服务"
        variant="outlined"
        extra={
          <ProFormGroup>
            <ProFormSwitch
              name="Enable"
              noStyle
              checkedChildren={'运行中'}
              unCheckedChildren={'已停止'}
            />
          </ProFormGroup>
        }
        tooltip="管理用户认证与授权的核心服务"
        style={{ maxWidth: 300 }}
      >
        <div>实例数量：3</div>
        <div>CPU 占用：45%</div>
        <div>内存占用：1.2 GB</div>
      </ProCard>
      <ProCard
        title="订单处理中心"
        extra="v2.3.1"
        tooltip="处理全站订单的创建、支付与履约"
        style={{ maxWidth: 300 }}
        boxShadow
      >
        <div>日均订单：52 万</div>
        <div>平均延迟：23ms</div>
        <div>成功率：99.97%</div>
      </ProCard>
      <ProCard
        title="支付网关"
        extra="v1.8.0"
        tooltip="对接第三方支付渠道的统一网关"
        style={{ maxWidth: 300 }}
        size="small"
      >
        <div>微信支付：已接入</div>
        <div>支付宝：已接入</div>
        <div>银联：接入中</div>
      </ProCard>
    </div>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

colSpan - 24

colSpan - 12

colSpan - 8

colSpan - 0

24 grids

colSpan-12

colSpan-6

colSpan - 200px

Auto

colSpan - 30%

ProCard ColSpan 配置 Props 说明：

direction: 排列方向，'column' 表示垂直排列
ghost: 是否使用幽灵模式，无背景和边框
gutter: 间距设置，支持响应式配置
title: 卡片标题
style: 卡片样式对象

子卡片配置：

colSpan: 列跨度，支持多种配置方式
layout: 布局方式，'center' 表示居中对齐
variant: 卡片变体样式，'outlined' 表示带边框

ColSpan 配置方式：

数字值: colSpan=12 使用 24 栅格系统
响应式对象: 根据屏幕尺寸设置不同的列数
像素值: colSpan="200px" 固定宽度
百分比: colSpan="30%" 相对宽度
零值: colSpan=0 隐藏卡片

响应式断点配置：

xs: 超小屏幕 (<576px)
sm: 小屏幕 (≥576px)
md: 中等屏幕 (≥768px)
lg: 大屏幕 (≥992px)
xl: 超大屏幕 (≥1200px)
xxl: 超超大屏幕 (≥1600px)

布局特点：

24 栅格系统: 使用数字值时，总列数应该为 24
自动宽度: 不设置 colSpan 时自动填充剩余空间
固定宽度: 使用像素值时宽度固定不变
相对宽度: 使用百分比时宽度随容器变化
隐藏卡片: colSpan=0 时卡片完全隐藏

Ghost 模式特点：

无背景: 卡片没有背景色
无边框: 卡片没有边框
透明效果: 适合作为布局容器

使用场景：

响应式布局: 构建响应式的卡片网格
固定布局: 使用固定宽度构建布局
弹性布局: 使用百分比构建弹性布局
条件显示: 使用 colSpan=0 条件隐藏卡片

最佳实践：

栅格计算: 使用数字值时确保总列数为 24
响应式设计: 在不同断点下测试布局效果
混合使用: 结合多种配置方式构建复杂布局

栅格布局

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard
        direction="column"
        ghost
        gutter={{
          xs: 8,
          sm: 8,
          md: 8,
          lg: 8,
          xl: 8,
          xxl: 8,
        }}
      >
        <ProCard layout="center" variant="outlined">
          colSpan - 24
        </ProCard>
        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 12,
            xxl: 24,
          }}
          layout="center"
          variant="outlined"
        >
          colSpan - 12
        </ProCard>
        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 8,
            lg: 6,
          }}
          layout="center"
          variant="outlined"
        >
          colSpan - 8
        </ProCard>
        <ProCard colSpan={0} layout="center" variant="outlined">
          colSpan - 0
        </ProCard>
      </ProCard>
      <ProCard gutter={8} title="24 grids" style={{ marginBlockStart: 8 }}>
        <ProCard colSpan={12} layout="center" variant="outlined">
          colSpan-12
        </ProCard>
        <ProCard colSpan={6} layout="center" variant="outlined">
          colSpan-6
        </ProCard>
        <ProCard colSpan={6} layout="center" variant="outlined">
          colSpan-6
        </ProCard>
      </ProCard>
      <ProCard style={{ marginBlockStart: 8 }} gutter={8} ghost>
        <ProCard colSpan="200px" layout="center" variant="outlined">
          colSpan - 200px
        </ProCard>
        <ProCard layout="center" variant="outlined">
          Auto
        </ProCard>
      </ProCard>
      <ProCard style={{ marginBlockStart: 8 }} gutter={8} ghost>
        <ProCard variant="outlined" layout="center">
          Auto
        </ProCard>
        <ProCard colSpan="30%" variant="outlined">
          colSpan - 30%
        </ProCard>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard ColSpan 配置 Props 说明：</h4>
        <ul>
          <li>
            <strong>direction</strong>: 排列方向，'column' 表示垂直排列
          </li>
          <li>
            <strong>ghost</strong>: 是否使用幽灵模式，无背景和边框
          </li>
          <li>
            <strong>gutter</strong>: 间距设置，支持响应式配置
          </li>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
        </ul>
        <h4>子卡片配置：</h4>
        <ul>
          <li>
            <strong>colSpan</strong>: 列跨度，支持多种配置方式
          </li>
          <li>
            <strong>layout</strong>: 布局方式，'center' 表示居中对齐
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
        </ul>
        <h4>ColSpan 配置方式：</h4>
        <ul>
          <li>
            <strong>数字值</strong>: colSpan={12} 使用 24 栅格系统
          </li>
          <li>
            <strong>响应式对象</strong>: 根据屏幕尺寸设置不同的列数
          </li>
          <li>
            <strong>像素值</strong>: colSpan="200px" 固定宽度
          </li>
          <li>
            <strong>百分比</strong>: colSpan="30%" 相对宽度
          </li>
          <li>
            <strong>零值</strong>: colSpan={0} 隐藏卡片
          </li>
        </ul>
        <h4>响应式断点配置：</h4>
        <ul>
          <li>
            <strong>xs</strong>: 超小屏幕 (&lt;576px)
          </li>
          <li>
            <strong>sm</strong>: 小屏幕 (≥576px)
          </li>
          <li>
            <strong>md</strong>: 中等屏幕 (≥768px)
          </li>
          <li>
            <strong>lg</strong>: 大屏幕 (≥992px)
          </li>
          <li>
            <strong>xl</strong>: 超大屏幕 (≥1200px)
          </li>
          <li>
            <strong>xxl</strong>: 超超大屏幕 (≥1600px)
          </li>
        </ul>
        <h4>布局特点：</h4>
        <ul>
          <li>
            <strong>24 栅格系统</strong>: 使用数字值时，总列数应该为 24
          </li>
          <li>
            <strong>自动宽度</strong>: 不设置 colSpan 时自动填充剩余空间
          </li>
          <li>
            <strong>固定宽度</strong>: 使用像素值时宽度固定不变
          </li>
          <li>
            <strong>相对宽度</strong>: 使用百分比时宽度随容器变化
          </li>
          <li>
            <strong>隐藏卡片</strong>: colSpan={0} 时卡片完全隐藏
          </li>
        </ul>
        <h4>Ghost 模式特点：</h4>
        <ul>
          <li>
            <strong>无背景</strong>: 卡片没有背景色
          </li>
          <li>
            <strong>无边框</strong>: 卡片没有边框
          </li>
          <li>
            <strong>透明效果</strong>: 适合作为布局容器
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>响应式布局</strong>: 构建响应式的卡片网格
          </li>
          <li>
            <strong>固定布局</strong>: 使用固定宽度构建布局
          </li>
          <li>
            <strong>弹性布局</strong>: 使用百分比构建弹性布局
          </li>
          <li>
            <strong>条件显示</strong>: 使用 colSpan={0} 条件隐藏卡片
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>栅格计算</strong>: 使用数字值时确保总列数为 24
          </li>
          <li>
            <strong>响应式设计</strong>: 在不同断点下测试布局效果
          </li>
          <li>
            <strong>混合使用</strong>: 结合多种配置方式构建复杂布局
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

24 Grid

Col

Specified Width px

Col

Auto

Specified Width Percentage

Auto

Col - Percentage

ProCard 响应式布局 Props 说明：

gutter: 间距设置，数字值表示统一的间距
title: 卡片标题
style: 卡片样式对象

子卡片配置：

colSpan: 响应式栅格列数配置，支持多种格式
layout: 布局方式，'center' 表示居中对齐
variant: 卡片变体样式，'outlined' 表示带边框

ColSpan 配置方式：

数字值: 如 { xs: 2, sm: 4 }，使用 24 栅格系统
像素值: 如 { xs: '50px', sm: '100px' } ，固定宽度
百分比: 如 { xs: '10%', sm: '20%' }，相对宽度

响应式断点：

xs: 超小屏幕 (<576px)
sm: 小屏幕 (≥576px)
md: 中等屏幕 (≥768px)
lg: 大屏幕 (≥992px)
xl: 超大屏幕 (≥1200px)

布局特点：

24 栅格系统: 使用数字值时，总列数应该为 24
固定宽度: 使用像素值时，卡片宽度固定不变
相对宽度: 使用百分比时，卡片宽度随容器变化
自动宽度: 不设置 colSpan 时，卡片自动填充剩余空间

使用场景：

栅格布局: 使用数字值构建响应式栅格
固定布局: 使用像素值构建固定宽度的布局
弹性布局: 使用百分比构建弹性布局
混合布局: 结合多种配置方式构建复杂布局

最佳实践：

栅格计算: 使用数字值时确保总列数为 24
响应式设计: 在不同断点下测试布局效果
性能考虑: 避免过于复杂的响应式配置

响应式

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard style={{ marginBlockStart: 8 }} gutter={8} title="24 Grid">
        <ProCard
          colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
        <ProCard
          colSpan={{ xs: 20, sm: 16, md: 12, lg: 8, xl: 4 }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
        <ProCard
          colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
      </ProCard>
      <ProCard
        style={{ marginBlockStart: 8 }}
        gutter={8}
        title="Specified Width px"
      >
        <ProCard
          colSpan={{
            xs: '50px',
            sm: '100px',
            md: '200px',
            lg: '300px',
            xl: '400px',
          }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
        <ProCard layout="center" variant="outlined">
          Auto
        </ProCard>
      </ProCard>

      <ProCard
        style={{ marginBlockStart: 8 }}
        gutter={8}
        title="Specified Width Percentage"
      >
        <ProCard layout="center" variant="outlined">
          Auto
        </ProCard>
        <ProCard
          layout="center"
          colSpan={{
            xs: '10%',
            sm: '20%',
            md: '30%',
            lg: '40%',
            xl: '50%',
          }}
          variant="outlined"
        >
          Col - Percentage
        </ProCard>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 响应式布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>gutter</strong>: 间距设置，数字值表示统一的间距
          </li>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
        </ul>
        <h4>子卡片配置：</h4>
        <ul>
          <li>
            <strong>colSpan</strong>: 响应式栅格列数配置，支持多种格式
          </li>
          <li>
            <strong>layout</strong>: 布局方式，'center' 表示居中对齐
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
        </ul>
        <h4>ColSpan 配置方式：</h4>
        <ul>
          <li>
            <strong>数字值</strong>: 如 {'{'} xs: 2, sm: 4 {'}'}，使用 24
            栅格系统
          </li>
          <li>
            <strong>像素值</strong>: 如 {'{'} xs: '50px', sm: '100px' {'}'}{' '}
            ，固定宽度
          </li>
          <li>
            <strong>百分比</strong>: 如 {'{'} xs: '10%', sm: '20%' {'}'}
            ，相对宽度
          </li>
        </ul>
        <h4>响应式断点：</h4>
        <ul>
          <li>
            <strong>xs</strong>: 超小屏幕 (&lt;576px)
          </li>
          <li>
            <strong>sm</strong>: 小屏幕 (≥576px)
          </li>
          <li>
            <strong>md</strong>: 中等屏幕 (≥768px)
          </li>
          <li>
            <strong>lg</strong>: 大屏幕 (≥992px)
          </li>
          <li>
            <strong>xl</strong>: 超大屏幕 (≥1200px)
          </li>
        </ul>
        <h4>布局特点：</h4>
        <ul>
          <li>
            <strong>24 栅格系统</strong>: 使用数字值时，总列数应该为 24
          </li>
          <li>
            <strong>固定宽度</strong>: 使用像素值时，卡片宽度固定不变
          </li>
          <li>
            <strong>相对宽度</strong>: 使用百分比时，卡片宽度随容器变化
          </li>
          <li>
            <strong>自动宽度</strong>: 不设置 colSpan 时，卡片自动填充剩余空间
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>栅格布局</strong>: 使用数字值构建响应式栅格
          </li>
          <li>
            <strong>固定布局</strong>: 使用像素值构建固定宽度的布局
          </li>
          <li>
            <strong>弹性布局</strong>: 使用百分比构建弹性布局
          </li>
          <li>
            <strong>混合布局</strong>: 结合多种配置方式构建复杂布局
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>栅格计算</strong>: 使用数字值时确保总列数为 24
          </li>
          <li>
            <strong>响应式设计</strong>: 在不同断点下测试布局效果
          </li>
          <li>
            <strong>性能考虑</strong>: 避免过于复杂的响应式配置
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

卡片切分

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

切分时父卡片的内容 padding 会被设置为 0。
切分时子卡片的 border-radius会被设置为 0。

Left and Right Columns with Title

September 28, 2019

Left Details

Left Content

Traffic Usage

Right Content

ProCard 响应式分割布局 Props 说明：

title: 卡片标题
extra: 卡片右上角额外内容
split: 分割方式，根据响应式状态动态调整
variant: 卡片变体样式，'outlined' 表示带边框
headerBordered: 是否显示头部边框

子卡片配置：

title: 子卡片标题
colSpan: 列跨度，'50%' 表示占 50% 宽度
children: 卡片内容

响应式分割特点：

大屏幕: 使用 'vertical' 分割，左右布局
小屏幕: 使用 'horizontal' 分割，上下布局
断点控制: 当容器宽度小于 596px 时切换布局

ColSpan 配置：

百分比: '50%' 表示占容器宽度的 50%
自动宽度: 不设置 colSpan 时自动填充剩余空间
响应式适配: 在不同分割方式下自动调整

布局效果：

垂直分割: 左右两列，左列占 50%，右列自动填充
水平分割: 上下两行，每行占满宽度
固定高度: 内容区域设置固定高度 360px

使用场景：

详情页面: 左侧详情，右侧操作或统计
对比展示: 左右对比不同数据或内容
表单布局: 左侧表单，右侧预览
监控面板: 左右分屏显示不同监控数据

最佳实践：

内容平衡: 确保左右内容的重要性和长度相对平衡
响应式测试: 在不同屏幕尺寸下测试布局效果
高度一致: 设置一致的高度确保视觉统一

import { ProCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const Demo = () => {
  const [responsive, setResponsive] = useState(false);
  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          title="Left and Right Columns with Title"
          extra="September 28, 2019"
          split={responsive ? 'horizontal' : 'vertical'}
          variant="outlined"
          headerBordered
        >
          <ProCard title="Left Details" colSpan="50%">
            <div style={{ height: 360 }}>Left Content</div>
          </ProCard>
          <ProCard title="Traffic Usage">
            <div style={{ height: 360 }}>Right Content</div>
          </ProCard>
        </ProCard>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 响应式分割布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角额外内容
          </li>
          <li>
            <strong>split</strong>: 分割方式，根据响应式状态动态调整
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
        </ul>
        <h4>子卡片配置：</h4>
        <ul>
          <li>
            <strong>title</strong>: 子卡片标题
          </li>
          <li>
            <strong>colSpan</strong>: 列跨度，'50%' 表示占 50% 宽度
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>响应式分割特点：</h4>
        <ul>
          <li>
            <strong>大屏幕</strong>: 使用 'vertical' 分割，左右布局
          </li>
          <li>
            <strong>小屏幕</strong>: 使用 'horizontal' 分割，上下布局
          </li>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换布局
          </li>
        </ul>
        <h4>ColSpan 配置：</h4>
        <ul>
          <li>
            <strong>百分比</strong>: '50%' 表示占容器宽度的 50%
          </li>
          <li>
            <strong>自动宽度</strong>: 不设置 colSpan 时自动填充剩余空间
          </li>
          <li>
            <strong>响应式适配</strong>: 在不同分割方式下自动调整
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>垂直分割</strong>: 左右两列，左列占 50%，右列自动填充
          </li>
          <li>
            <strong>水平分割</strong>: 上下两行，每行占满宽度
          </li>
          <li>
            <strong>固定高度</strong>: 内容区域设置固定高度 360px
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>详情页面</strong>: 左侧详情，右侧操作或统计
          </li>
          <li>
            <strong>对比展示</strong>: 左右对比不同数据或内容
          </li>
          <li>
            <strong>表单布局</strong>: 左侧表单，右侧预览
          </li>
          <li>
            <strong>监控面板</strong>: 左右分屏显示不同监控数据
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>内容平衡</strong>: 确保左右内容的重要性和长度相对平衡
          </li>
          <li>
            <strong>响应式测试</strong>: 在不同屏幕尺寸下测试布局效果
          </li>
          <li>
            <strong>高度一致</strong>: 设置一致的高度确保视觉统一
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

左右分栏

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

Left Details

Left Content

Left and Right Columns with Title

Right Content

ProCard Split 布局 Props 说明：

split: 分割方式，'vertical' 表示垂直分割
children: ProCard 子组件

ProCard 子组件配置：

title: 卡片标题
colSpan: 栅格列数，可以是百分比字符串如 '30%'
headerBordered: 是否显示头部边框
children: 卡片内容

ColSpan 百分比特点：

百分比控制: 使用百分比精确控制宽度比例
响应式适配: 百分比会根据容器宽度自动调整
灵活布局: 比固定栅格数更灵活的布局控制

布局效果：

左侧卡片: 占 30% 宽度，显示详细信息
右侧卡片: 占剩余 70% 宽度，显示主要内容
垂直分割: 两个卡片垂直排列

使用场景：

详情页面: 左侧显示详细信息，右侧显示主要内容
编辑页面: 左侧显示表单，右侧显示预览
列表页面: 左侧显示筛选条件，右侧显示列表
仪表盘: 左侧显示导航，右侧显示内容

最佳实践：

比例合理: 根据内容重要性合理分配宽度比例
响应式考虑: 在小屏幕上可能需要调整布局
视觉平衡: 确保整体布局的视觉平衡

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard split="vertical">
        <ProCard title="Left Details" colSpan="30%">
          Left Content
        </ProCard>
        <ProCard title="Left and Right Columns with Title" headerBordered>
          <div style={{ height: 360 }}>Right Content</div>
        </ProCard>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Split 布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>split</strong>: 分割方式，'vertical' 表示垂直分割
          </li>
          <li>
            <strong>children</strong>: ProCard 子组件
          </li>
        </ul>
        <h4>ProCard 子组件配置：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>colSpan</strong>: 栅格列数，可以是百分比字符串如 '30%'
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>ColSpan 百分比特点：</h4>
        <ul>
          <li>
            <strong>百分比控制</strong>: 使用百分比精确控制宽度比例
          </li>
          <li>
            <strong>响应式适配</strong>: 百分比会根据容器宽度自动调整
          </li>
          <li>
            <strong>灵活布局</strong>: 比固定栅格数更灵活的布局控制
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>左侧卡片</strong>: 占 30% 宽度，显示详细信息
          </li>
          <li>
            <strong>右侧卡片</strong>: 占剩余 70% 宽度，显示主要内容
          </li>
          <li>
            <strong>垂直分割</strong>: 两个卡片垂直排列
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>详情页面</strong>: 左侧显示详细信息，右侧显示主要内容
          </li>
          <li>
            <strong>编辑页面</strong>: 左侧显示表单，右侧显示预览
          </li>
          <li>
            <strong>列表页面</strong>: 左侧显示筛选条件，右侧显示列表
          </li>
          <li>
            <strong>仪表盘</strong>: 左侧显示导航，右侧显示内容
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>比例合理</strong>: 根据内容重要性合理分配宽度比例
          </li>
          <li>
            <strong>响应式考虑</strong>: 在小屏幕上可能需要调整布局
          </li>
          <li>
            <strong>视觉平衡</strong>: 确保整体布局的视觉平衡
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

复杂切分

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

Complex Split

September 28, 2019

Yesterday's Total Traffic

123

Total Traffic This Month

234

Total Traffic This Year

345

Ongoing Experiments

12/56

Total Historical Experiments

134

Traffic Trends

Chart

Traffic Usage

Right Side Content

ProCard 复杂分割布局 Props 说明：

title: 卡片标题
extra: 卡片右上角额外内容
variant: 卡片变体样式，'outlined' 表示带边框
headerBordered: 是否显示头部边框
split: 分割方式，根据响应式状态动态调整

Split 分割方式：

horizontal: 水平分割，子卡片上下排列
vertical: 垂直分割，子卡片左右排列
响应式切换: 根据屏幕尺寸自动切换分割方式

嵌套布局结构：

外层卡片: 主要容器，控制整体分割方向
中层卡片: 中间容器，处理水平分割
内层卡片: 内层容器，处理垂直分割
叶子卡片: 最终的内容卡片

响应式布局特点：

断点控制: 当容器宽度小于 596px 时切换布局
动态分割: 根据屏幕尺寸自动调整分割方向
实时监听: 使用 ResizeObserver 实时监听容器大小变化

布局效果：

大屏幕: 使用垂直分割，充分利用水平空间
小屏幕: 使用水平分割，适合垂直滚动
嵌套结构: 支持多层嵌套的分割布局

使用场景：

数据仪表盘: 构建复杂的数据展示界面
报表系统: 展示多维度统计报表
监控面板: 构建系统监控面板
分析页面: 数据分析和可视化页面

最佳实践：

合理嵌套: 避免过深的嵌套层级
响应式设计: 确保在不同屏幕尺寸下都有良好的显示效果
性能优化: 大量数据时考虑虚拟化或分页

import { ProCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const Demo = () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          title="Complex Split"
          extra="September 28, 2019"
          variant="outlined"
          headerBordered
          split={responsive ? 'horizontal' : 'vertical'}
        >
          <ProCard split="horizontal">
            <ProCard split="horizontal">
              <ProCard split={responsive ? 'horizontal' : 'vertical'}>
                <ProCard title="Yesterday's Total Traffic">123</ProCard>
                <ProCard title="Total Traffic This Month">234</ProCard>
                <ProCard title="Total Traffic This Year">345</ProCard>
              </ProCard>
              <ProCard split="vertical">
                <ProCard title="Ongoing Experiments">12/56</ProCard>
                <ProCard title="Total Historical Experiments">134</ProCard>
              </ProCard>
            </ProCard>
            <ProCard title="Traffic Trends">
              <div>Chart</div>
              <div>Chart</div>
              <div>Chart</div>
              <div>Chart</div>
              <div>Chart</div>
            </ProCard>
          </ProCard>
          <ProCard title="Traffic Usage">Right Side Content</ProCard>
        </ProCard>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 复杂分割布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角额外内容
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
          <li>
            <strong>split</strong>: 分割方式，根据响应式状态动态调整
          </li>
        </ul>
        <h4>Split 分割方式：</h4>
        <ul>
          <li>
            <strong>horizontal</strong>: 水平分割，子卡片上下排列
          </li>
          <li>
            <strong>vertical</strong>: 垂直分割，子卡片左右排列
          </li>
          <li>
            <strong>响应式切换</strong>: 根据屏幕尺寸自动切换分割方式
          </li>
        </ul>
        <h4>嵌套布局结构：</h4>
        <ul>
          <li>
            <strong>外层卡片</strong>: 主要容器，控制整体分割方向
          </li>
          <li>
            <strong>中层卡片</strong>: 中间容器，处理水平分割
          </li>
          <li>
            <strong>内层卡片</strong>: 内层容器，处理垂直分割
          </li>
          <li>
            <strong>叶子卡片</strong>: 最终的内容卡片
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换布局
          </li>
          <li>
            <strong>动态分割</strong>: 根据屏幕尺寸自动调整分割方向
          </li>
          <li>
            <strong>实时监听</strong>: 使用 ResizeObserver 实时监听容器大小变化
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>大屏幕</strong>: 使用垂直分割，充分利用水平空间
          </li>
          <li>
            <strong>小屏幕</strong>: 使用水平分割，适合垂直滚动
          </li>
          <li>
            <strong>嵌套结构</strong>: 支持多层嵌套的分割布局
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据仪表盘</strong>: 构建复杂的数据展示界面
          </li>
          <li>
            <strong>报表系统</strong>: 展示多维度统计报表
          </li>
          <li>
            <strong>监控面板</strong>: 构建系统监控面板
          </li>
          <li>
            <strong>分析页面</strong>: 数据分析和可视化页面
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>合理嵌套</strong>: 避免过深的嵌套层级
          </li>
          <li>
            <strong>响应式设计</strong>: 确保在不同屏幕尺寸下都有良好的显示效果
          </li>
          <li>
            <strong>性能优化</strong>: 大量数据时考虑虚拟化或分页
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

ProCard.Group 分割线

通过 ProCard.Group 的 split 属性可以为分组内的子卡片添加分割线，支持 vertical（垂直）和 horizontal（水平）两种方向。

无分割线

卡片 1

内容 1

卡片 2

内容 2

卡片 3

内容 3

垂直分割线

卡片 1

内容 1

卡片 2

内容 2

卡片 3

内容 3

水平分割线

卡片 1

内容 1

卡片 2

内容 2

卡片 3

内容 3

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard title="无分割线">
        <ProCard.Group title="无分割线" tooltip="split: false">
          <ProCard title="卡片 1">内容 1</ProCard>
          <ProCard title="卡片 2">内容 2</ProCard>
          <ProCard title="卡片 3">内容 3</ProCard>
        </ProCard.Group>
      </ProCard>

      <ProCard title="垂直分割线" style={{ marginBlockStart: 24 }}>
        <ProCard.Group
          title="垂直分割线"
          tooltip="split: vertical"
          split="vertical"
        >
          <ProCard title="卡片 1">内容 1</ProCard>
          <ProCard title="卡片 2">内容 2</ProCard>
          <ProCard title="卡片 3">内容 3</ProCard>
        </ProCard.Group>
      </ProCard>

      <ProCard title="水平分割线" style={{ marginBlockStart: 24 }}>
        <ProCard.Group
          title="水平分割线"
          tooltip="split: horizontal"
          split="horizontal"
          direction="column"
        >
          <ProCard title="卡片 1">内容 1</ProCard>
          <ProCard title="卡片 2">内容 2</ProCard>
          <ProCard title="卡片 3">内容 3</ProCard>
        </ProCard.Group>
      </ProCard>
    </>
  );
};

export default Demo;

栅格间隔

栅格常常需要和间隔进行配合，你可以使用 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

Auto

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard gutter={[16, 16]}>
        <ProCard colSpan="30%" title="title" headerBordered variant="outlined">
          300px
        </ProCard>
        <ProCard variant="outlined">Auto</ProCard>
      </ProCard>

      <ProCard
        gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
        style={{ marginBlockStart: 16 }}
      >
        <ProCard variant="outlined">Responsive</ProCard>
        <ProCard variant="outlined">Responsive</ProCard>
        <ProCard variant="outlined">Responsive</ProCard>
      </ProCard>

      <ProCard gutter={16} style={{ marginBlockStart: 16 }}>
        <ProCard variant="outlined">Auto</ProCard>
        <ProCard variant="outlined">Auto</ProCard>
        <ProCard variant="outlined">Auto</ProCard>
      </ProCard>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

多行卡片

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

Wrap

Col

ProCard 多行布局 Props 说明：

gutter: 间距设置，[16, 16] 表示水平和垂直间距都是 16px
wrap: 是否允许换行，布尔值
title: 卡片标题
style: 卡片样式对象

子卡片配置：

colSpan: 响应式栅格列数配置对象
layout: 布局方式，'center' 表示居中对齐
variant: 卡片变体样式，'outlined' 表示带边框

响应式 ColSpan 配置：

xs: 超小屏幕 (<576px)，占 24 列（全宽）
sm: 小屏幕 (≥576px)，占 12 列（半宽）
md: 中等屏幕 (≥768px)，占 12 列（半宽）
lg: 大屏幕 (≥992px)，占 12 列（半宽）
xl: 超大屏幕 (≥1200px)，占 12 列（半宽）

Wrap 换行特点：

自动换行: 当子卡片总宽度超过容器宽度时自动换行
响应式换行: 在不同屏幕尺寸下自动调整换行
间距保持: 换行后保持设定的间距

布局效果：

小屏幕: 每个卡片占满宽度，垂直排列
大屏幕: 每行显示两个卡片，水平排列
自动换行: 超出容器宽度的卡片自动换到下一行

使用场景：

响应式布局: 构建响应式的卡片网格
产品展示: 展示产品列表或卡片
数据展示: 展示多个数据卡片
仪表盘: 构建响应式仪表盘

最佳实践：

响应式设计: 确保在不同屏幕尺寸下都有良好的显示效果
间距合理: 设置合适的间距，避免过于拥挤或稀疏
内容一致: 确保子卡片的内容高度相对一致

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard
        style={{ marginBlockStart: 8 }}
        gutter={[16, 16]}
        wrap
        title="Wrap"
      >
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          layout="center"
          variant="outlined"
        >
          Col
        </ProCard>
        <ProCard
          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
          variant="outlined"
        >
          Col
        </ProCard>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 多行布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>gutter</strong>: 间距设置，[16, 16] 表示水平和垂直间距都是
            16px
          </li>
          <li>
            <strong>wrap</strong>: 是否允许换行，布尔值
          </li>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
        </ul>
        <h4>子卡片配置：</h4>
        <ul>
          <li>
            <strong>colSpan</strong>: 响应式栅格列数配置对象
          </li>
          <li>
            <strong>layout</strong>: 布局方式，'center' 表示居中对齐
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
        </ul>
        <h4>响应式 ColSpan 配置：</h4>
        <ul>
          <li>
            <strong>xs</strong>: 超小屏幕 (&lt;576px)，占 24 列（全宽）
          </li>
          <li>
            <strong>sm</strong>: 小屏幕 (≥576px)，占 12 列（半宽）
          </li>
          <li>
            <strong>md</strong>: 中等屏幕 (≥768px)，占 12 列（半宽）
          </li>
          <li>
            <strong>lg</strong>: 大屏幕 (≥992px)，占 12 列（半宽）
          </li>
          <li>
            <strong>xl</strong>: 超大屏幕 (≥1200px)，占 12 列（半宽）
          </li>
        </ul>
        <h4>Wrap 换行特点：</h4>
        <ul>
          <li>
            <strong>自动换行</strong>: 当子卡片总宽度超过容器宽度时自动换行
          </li>
          <li>
            <strong>响应式换行</strong>: 在不同屏幕尺寸下自动调整换行
          </li>
          <li>
            <strong>间距保持</strong>: 换行后保持设定的间距
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>小屏幕</strong>: 每个卡片占满宽度，垂直排列
          </li>
          <li>
            <strong>大屏幕</strong>: 每行显示两个卡片，水平排列
          </li>
          <li>
            <strong>自动换行</strong>: 超出容器宽度的卡片自动换到下一行
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>响应式布局</strong>: 构建响应式的卡片网格
          </li>
          <li>
            <strong>产品展示</strong>: 展示产品列表或卡片
          </li>
          <li>
            <strong>数据展示</strong>: 展示多个数据卡片
          </li>
          <li>
            <strong>仪表盘</strong>: 构建响应式仪表盘
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>响应式设计</strong>: 确保在不同屏幕尺寸下都有良好的显示效果
          </li>
          <li>
            <strong>间距合理</strong>: 设置合适的间距，避免过于拥挤或稀疏
          </li>
          <li>
            <strong>内容一致</strong>: 确保子卡片的内容高度相对一致
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

分组展示

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

Core Metrics

Today's UV

79.00

Frozen Amount

112,893.00

Information Completeness

93/ 100

Frozen Amount

112,893

import { ProCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { Statistic } from 'antd';
import { useState } from 'react';

const { Divider } = ProCard;

const Demo = () => {
  const [responsive, setResponsive] = useState(false);
  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <ProCard.Group
        title="Core Metrics"
        direction={responsive ? 'column' : 'row'}
      >
        <ProCard>
          <Statistic title="Today's UV" value={79.0} precision={2} />
        </ProCard>
        <Divider orientation={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <Statistic title="Frozen Amount" value={112893.0} precision={2} />
        </ProCard>
        <Divider orientation={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <Statistic
            title="Information Completeness"
            value={93}
            suffix="/ 100"
          />
        </ProCard>
        <Divider orientation={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <Statistic title="Frozen Amount" value={112893.0} />
        </ProCard>
      </ProCard.Group>
    </RcResizeObserver>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

标题带分割线

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

Title

extra

Content

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <ProCard
      title="Title"
      extra="extra"
      tooltip="This is a tooltip"
      style={{ maxWidth: 300 }}
      headerBordered
    >
      Content
    </ProCard>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

可折叠

你可以使用 collapsible 来配置卡片是否可折叠，支持 icon（图标触发）和 header（标题触发）两种模式，通过 defaultCollapsed 属性配置是否默认折叠。
或者你可以通过 collapsed 属性受控进行自定义。

Collapsible

Content

Collapsible

Content

Collapsible

Content

Collapsible

Content

Collapsible - Controlled Custom

Collapse - Collapsible - Custom Icon (Controlled)

Content

Collapse - Collapsible - Custom Icon

Content

ProCard 可折叠功能 Props 说明：

title: 卡片标题
headerBordered: 是否显示头部边框
collapsible: 是否可折叠，可以是布尔值或 'icon'
defaultCollapsed: 默认是否折叠
collapsed: 受控的折叠状态
onCollapse: 折叠状态变化回调函数
extra: 卡片右上角额外内容

Collapsible 配置方式：

布尔值: collapsible= 显示默认折叠图标
字符串: collapsible="icon" 只显示图标
自定义控制: 使用 collapsed 属性进行受控

自定义图标配置：

collapsibleIconRender: 自定义折叠图标的渲染函数
参数: 接收 { collapsed: boolean } 对象
返回值: 返回自定义的 React 节点

事件处理：

onCollapse: 折叠状态变化时触发
stopPropagation: 阻止事件冒泡，避免触发折叠
自定义控制: 通过状态管理控制折叠状态

样式变体：

variant: 'outlined' 表示带边框样式
size: 'small' 表示小尺寸
headerBordered: 显示头部边框

使用场景：

信息展示: 可折叠的信息面板
设置面板: 可折叠的设置选项
详情展开: 点击展开查看详细信息
空间节省: 节省页面空间，按需展开

最佳实践：

默认状态: 根据内容重要性设置默认折叠状态
图标设计: 设计清晰的折叠/展开图标
交互反馈: 提供明确的交互反馈
状态管理: 合理管理折叠状态

import { RightOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { useState } from 'react';

export default () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          padding: 24,
          gap: 12,
        }}
      >
        <ProCard
          title="Collapsible"
          headerBordered
          collapsible
          defaultCollapsed
          onCollapse={(collapsed) => {
            message.info(collapsed ? '已收起' : '已展开');
          }}
          extra={
            <Button
              size="small"
              onClick={(e) => {
                e.stopPropagation();
              }}
            >
              Submit
            </Button>
          }
        >
          Content
        </ProCard>
        <ProCard
          title="Collapsible"
          headerBordered
          collapsible="icon"
          defaultCollapsed
          onCollapse={(collapsed) => {
            message.info(collapsed ? '已收起' : '已展开');
          }}
          extra={
            <Button
              size="small"
              onClick={(e) => {
                e.stopPropagation();
              }}
            >
              Submit
            </Button>
          }
        >
          Content
        </ProCard>
        <ProCard
          title="Collapsible"
          variant="outlined"
          headerBordered
          collapsible
          defaultCollapsed
          onCollapse={(collapsed) => {
            message.info(collapsed ? '已收起' : '已展开');
          }}
          extra={
            <Button
              size="small"
              onClick={(e) => {
                e.stopPropagation();
              }}
            >
              Submit
            </Button>
          }
        >
          Content
        </ProCard>
        <ProCard
          variant="outlined"
          size="small"
          title="Collapsible"
          headerBordered
          collapsible
          defaultCollapsed
          onCollapse={(collapsed) => {
            message.info(collapsed ? '已收起' : '已展开');
          }}
          extra={
            <Button
              size="small"
              onClick={(e) => {
                e.stopPropagation();
              }}
            >
              Submit
            </Button>
          }
        >
          Content
        </ProCard>
        <ProCard
          title="Collapsible - Controlled Custom"
          extra={
            <RightOutlined
              rotate={!collapsed ? 90 : undefined}
              onClick={() => {
                setCollapsed(!collapsed);
              }}
            />
          }
          style={{ marginBlockStart: 16 }}
          headerBordered
          collapsed={collapsed}
        >
          Content
        </ProCard>
        <ProCard
          title="Collapsible - Custom Icon (Controlled)"
          collapsibleIconRender={({
            collapsed: buildInCollapsed,
          }: {
            collapsed: boolean;
          }) =>
            buildInCollapsed ? <span>Collapse - </span> : <span>Expand - </span>
          }
          style={{ marginBlockStart: 16 }}
          headerBordered
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
        >
          Content
        </ProCard>
        <ProCard
          title="Collapsible - Custom Icon"
          collapsibleIconRender={({
            collapsed: buildInCollapsed,
          }: {
            collapsed: boolean;
          }) =>
            buildInCollapsed ? <span>Collapse - </span> : <span>Expand - </span>
          }
          style={{ marginBlockStart: 16 }}
          headerBordered
          collapsible
          defaultCollapsed
        >
          Content
        </ProCard>
      </div>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 可折叠功能 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
          <li>
            <strong>collapsible</strong>: 是否可折叠，可以是布尔值或 'icon'
          </li>
          <li>
            <strong>defaultCollapsed</strong>: 默认是否折叠
          </li>
          <li>
            <strong>collapsed</strong>: 受控的折叠状态
          </li>
          <li>
            <strong>onCollapse</strong>: 折叠状态变化回调函数
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角额外内容
          </li>
        </ul>
        <h4>Collapsible 配置方式：</h4>
        <ul>
          <li>
            <strong>布尔值</strong>: collapsible={true} 显示默认折叠图标
          </li>
          <li>
            <strong>字符串</strong>: collapsible="icon" 只显示图标
          </li>
          <li>
            <strong>自定义控制</strong>: 使用 collapsed 属性进行受控
          </li>
        </ul>
        <h4>自定义图标配置：</h4>
        <ul>
          <li>
            <strong>collapsibleIconRender</strong>: 自定义折叠图标的渲染函数
          </li>
          <li>
            <strong>参数</strong>: 接收 {'{'} collapsed: boolean {'}'} 对象
          </li>
          <li>
            <strong>返回值</strong>: 返回自定义的 React 节点
          </li>
        </ul>
        <h4>事件处理：</h4>
        <ul>
          <li>
            <strong>onCollapse</strong>: 折叠状态变化时触发
          </li>
          <li>
            <strong>stopPropagation</strong>: 阻止事件冒泡，避免触发折叠
          </li>
          <li>
            <strong>自定义控制</strong>: 通过状态管理控制折叠状态
          </li>
        </ul>
        <h4>样式变体：</h4>
        <ul>
          <li>
            <strong>variant</strong>: 'outlined' 表示带边框样式
          </li>
          <li>
            <strong>size</strong>: 'small' 表示小尺寸
          </li>
          <li>
            <strong>headerBordered</strong>: 显示头部边框
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>信息展示</strong>: 可折叠的信息面板
          </li>
          <li>
            <strong>设置面板</strong>: 可折叠的设置选项
          </li>
          <li>
            <strong>详情展开</strong>: 点击展开查看详细信息
          </li>
          <li>
            <strong>空间节省</strong>: 节省页面空间，按需展开
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>默认状态</strong>: 根据内容重要性设置默认折叠状态
          </li>
          <li>
            <strong>图标设计</strong>: 设计清晰的折叠/展开图标
          </li>
          <li>
            <strong>交互反馈</strong>: 提供明确的交互反馈
          </li>
          <li>
            <strong>状态管理</strong>: 合理管理折叠状态
          </li>
        </ul>
      </div>
    </>
  );
};

不可折叠

不可折叠的卡片

内容

这个卡片不能折叠

图标触发折叠

图标触发的卡片

内容

点击右上角的图标可以折叠此卡片

标题触发折叠

标题触发的卡片

内容

点击标题可以折叠此卡片

折叠触发模式

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard title="不可折叠">
        <ProCard
          title="不可折叠的卡片"
          tooltip="collapsible: false（默认）"
          extra="内容"
          style={{ marginBlockStart: 16 }}
        >
          <div>这个卡片不能折叠</div>
        </ProCard>
      </ProCard>

      <ProCard title="图标触发折叠" style={{ marginBlockStart: 24 }}>
        <ProCard
          title="图标触发的卡片"
          tooltip="collapsible: icon"
          collapsible
          extra="内容"
          style={{ marginBlockStart: 16 }}
        >
          <div>点击右上角的图标可以折叠此卡片</div>
        </ProCard>
      </ProCard>

      <ProCard title="标题触发折叠" style={{ marginBlockStart: 24 }}>
        <ProCard
          title="标题触发的卡片"
          tooltip="collapsible: header"
          collapsible="header"
          extra="内容"
          style={{ marginBlockStart: 16 }}
        >
          <div>点击标题可以折叠此卡片</div>
        </ProCard>
      </ProCard>
    </>
  );
};

export default Demo;

幽灵模式

配置 ghost 属性为 true，卡片将移除自身的背景色、边框、间距，变为透明布局容器，常用于页面内嵌套布局。

外层容器

子卡片一

幽灵模式的父卡片没有背景、边框和间距

常用于作为透明布局容器

子卡片二

子卡片保留自己的样式

父级 ghost 不影响子级外观

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <div style={{ background: '#f0f2f5', padding: 24 }}>
      <ProCard title="外层容器" variant="outlined">
        <ProCard ghost gutter={16}>
          <ProCard title="子卡片一" variant="outlined" colSpan={12}>
            <div>幽灵模式的父卡片没有背景、边框和间距</div>
            <div>常用于作为透明布局容器</div>
          </ProCard>
          <ProCard title="子卡片二" variant="outlined" colSpan={12}>
            <div>子卡片保留自己的样式</div>
            <div>父级 ghost 不影响子级外观</div>
          </ProCard>
        </ProCard>
      </ProCard>
    </div>
  );
};

export default Demo;

卡片组展开

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

Card Group Expanded

Card Content

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard title="Card Group Expanded" ghost gutter={8} collapsible>
        <ProCard layout="center" variant="outlined">
          Card Content
        </ProCard>
        <ProCard layout="center" variant="outlined">
          Card Content
        </ProCard>
        <ProCard layout="center" variant="outlined">
          Card Content
        </ProCard>
      </ProCard>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

内容居中

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

Title

extra

123

456

ProCard Layout Props 说明：

title: 卡片标题
extra: 卡片右上角额外内容
layout: 布局方式，'center' 表示居中对齐
direction: 排列方向，'column' 表示垂直排列
style: 卡片样式对象，设置尺寸
children: 卡片内容

Layout 布局方式：

default: 默认布局，左对齐
center: 居中对齐
right: 右对齐

Direction 排列方向：

row: 水平排列（默认）
column: 垂直排列

样式配置：

maxWidth: 设置最大宽度，避免在大屏幕上过宽
height: 设置固定高度，确保一致的视觉效果

布局效果：

居中对齐: 内容在卡片中居中对齐
垂直排列: 子元素垂直堆叠排列
固定尺寸: 卡片有固定的宽度和高度

使用场景：

信息展示: 居中展示重要信息
状态卡片: 展示状态或统计信息
操作面板: 构建操作按钮面板
仪表盘: 构建数据仪表盘组件

最佳实践：

内容简洁: 居中对齐适合简洁的内容
尺寸合理: 设置合适的尺寸，避免内容溢出
视觉平衡: 确保整体布局的视觉平衡

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard
        title="Title"
        extra="extra"
        layout="center"
        direction="column"
        style={{ maxWidth: 300, height: 200 }}
      >
        <div>123</div>
        <div>456</div>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Layout Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角额外内容
          </li>
          <li>
            <strong>layout</strong>: 布局方式，'center' 表示居中对齐
          </li>
          <li>
            <strong>direction</strong>: 排列方向，'column' 表示垂直排列
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象，设置尺寸
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>Layout 布局方式：</h4>
        <ul>
          <li>
            <strong>default</strong>: 默认布局，左对齐
          </li>
          <li>
            <strong>center</strong>: 居中对齐
          </li>
          <li>
            <strong>right</strong>: 右对齐
          </li>
        </ul>
        <h4>Direction 排列方向：</h4>
        <ul>
          <li>
            <strong>row</strong>: 水平排列（默认）
          </li>
          <li>
            <strong>column</strong>: 垂直排列
          </li>
        </ul>
        <h4>样式配置：</h4>
        <ul>
          <li>
            <strong>maxWidth</strong>: 设置最大宽度，避免在大屏幕上过宽
          </li>
          <li>
            <strong>height</strong>: 设置固定高度，确保一致的视觉效果
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>居中对齐</strong>: 内容在卡片中居中对齐
          </li>
          <li>
            <strong>垂直排列</strong>: 子元素垂直堆叠排列
          </li>
          <li>
            <strong>固定尺寸</strong>: 卡片有固定的宽度和高度
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>信息展示</strong>: 居中展示重要信息
          </li>
          <li>
            <strong>状态卡片</strong>: 展示状态或统计信息
          </li>
          <li>
            <strong>操作面板</strong>: 构建操作按钮面板
          </li>
          <li>
            <strong>仪表盘</strong>: 构建数据仪表盘组件
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>内容简洁</strong>: 居中对齐适合简洁的内容
          </li>
          <li>
            <strong>尺寸合理</strong>: 设置合适的尺寸，避免内容溢出
          </li>
          <li>
            <strong>视觉平衡</strong>: 确保整体布局的视觉平衡
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

加载中

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

Custom Loading

extra

ProCard Loading Props 说明：

loading: 加载状态，可以是布尔值或 React 节点
title: 卡片标题
extra: 卡片右上角额外内容
layout: 布局方式，'center' 表示居中对齐
style: 卡片样式对象
children: 卡片内容

Loading 使用方式：

布尔值: loading= 使用默认的骨架屏效果
React 节点: loading={ <div>Loading</div> } 使用自定义加载内容

默认 Loading 效果：

骨架屏: 显示骨架屏效果，模拟内容加载
禁用交互: 加载状态下卡片不可交互
视觉反馈: 提供明确的加载状态指示

自定义 Loading：

自定义内容: 可以传入任何 React 节点作为加载内容
样式控制: 完全控制加载内容的样式和布局
品牌一致性: 使用符合品牌风格的加载内容

使用场景：

数据加载: 异步获取数据时显示
网络请求: 等待 API 响应时显示
初始化: 组件初始化过程中显示
状态切换: 从一种状态切换到另一种状态时显示

最佳实践：

合理时机: 在真正需要加载时使用，避免过度使用
用户体验: 提供清晰的加载状态反馈
性能考虑: 避免不必要的加载状态切换
自定义设计: 根据业务需求设计合适的加载内容

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard loading style={{ maxWidth: 300 }}>
        Content
      </ProCard>

      <ProCard
        loading
        style={{ maxWidth: 300, marginBlockStart: 16 }}
        layout="center"
      >
        Content
      </ProCard>

      <ProCard
        title="Custom Loading"
        extra="extra"
        loading={<div>Loading</div>}
        style={{ maxWidth: 300, marginBlockStart: 16 }}
      >
        Content
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Loading Props 说明：</h4>
        <ul>
          <li>
            <strong>loading</strong>: 加载状态，可以是布尔值或 React 节点
          </li>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角额外内容
          </li>
          <li>
            <strong>layout</strong>: 布局方式，'center' 表示居中对齐
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>Loading 使用方式：</h4>
        <ul>
          <li>
            <strong>布尔值</strong>: loading={true} 使用默认的骨架屏效果
          </li>
          <li>
            <strong>React 节点</strong>: loading={'{'}{' '}
            &lt;div&gt;Loading&lt;/div&gt; {'}'} 使用自定义加载内容
          </li>
        </ul>
        <h4>默认 Loading 效果：</h4>
        <ul>
          <li>
            <strong>骨架屏</strong>: 显示骨架屏效果，模拟内容加载
          </li>
          <li>
            <strong>禁用交互</strong>: 加载状态下卡片不可交互
          </li>
          <li>
            <strong>视觉反馈</strong>: 提供明确的加载状态指示
          </li>
        </ul>
        <h4>自定义 Loading：</h4>
        <ul>
          <li>
            <strong>自定义内容</strong>: 可以传入任何 React 节点作为加载内容
          </li>
          <li>
            <strong>样式控制</strong>: 完全控制加载内容的样式和布局
          </li>
          <li>
            <strong>品牌一致性</strong>: 使用符合品牌风格的加载内容
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据加载</strong>: 异步获取数据时显示
          </li>
          <li>
            <strong>网络请求</strong>: 等待 API 响应时显示
          </li>
          <li>
            <strong>初始化</strong>: 组件初始化过程中显示
          </li>
          <li>
            <strong>状态切换</strong>: 从一种状态切换到另一种状态时显示
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>合理时机</strong>: 在真正需要加载时使用，避免过度使用
          </li>
          <li>
            <strong>用户体验</strong>: 提供清晰的加载状态反馈
          </li>
          <li>
            <strong>性能考虑</strong>: 避免不必要的加载状态切换
          </li>
          <li>
            <strong>自定义设计</strong>: 根据业务需求设计合适的加载内容
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

操作项

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

Actions

Card content

Standalone Actions

Card content

Settings

No Actions

Card content

ProCard Props 说明：

title: 卡片标题，可以是字符串或 React 节点
actions: 卡片操作区域，可以是数组（多个操作按钮）或单个 React 节点
variant: 卡片变体样式，可选值：'outlined' | 'borderless'
style: 卡片的样式对象
children: 卡片内容区域

Actions 使用说明：

数组形式: 传入 React 节点数组，每个元素会渲染为一个操作按钮
单个节点: 传入单个 React 节点，可以自定义操作区域的布局和样式
不设置: 如果不设置 actions 属性，卡片底部不会显示操作区域

import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { Space } from 'antd';

const Demo = () => {
  return (
    <>
      <Space>
        <ProCard
          title="Actions"
          style={{ maxWidth: 300 }}
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <div>Card content</div>
          <div>Card content</div>
          <div>Card content</div>
        </ProCard>

        <ProCard
          title="Standalone Actions"
          style={{ maxWidth: 300 }}
          variant="outlined"
          actions={
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 12,
                flex: 1,
                gap: 8,
              }}
            >
              <SettingOutlined key="setting" />
              Settings
            </div>
          }
        >
          <div>Card content</div>
          <div>Card content</div>
          <div>Card content</div>
        </ProCard>

        <ProCard
          variant="outlined"
          title="No Actions"
          style={{ maxWidth: 300 }}
        >
          <div>Card content</div>
          <div>Card content</div>
          <div>Card content</div>
        </ProCard>
      </Space>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题，可以是字符串或 React 节点
          </li>
          <li>
            <strong>actions</strong>:
            卡片操作区域，可以是数组（多个操作按钮）或单个 React 节点
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，可选值：'outlined' |
            'borderless'
          </li>
          <li>
            <strong>style</strong>: 卡片的样式对象
          </li>
          <li>
            <strong>children</strong>: 卡片内容区域
          </li>
        </ul>
        <h4>Actions 使用说明：</h4>
        <ul>
          <li>
            <strong>数组形式</strong>: 传入 React
            节点数组，每个元素会渲染为一个操作按钮
          </li>
          <li>
            <strong>单个节点</strong>: 传入单个 React
            节点，可以自定义操作区域的布局和样式
          </li>
          <li>
            <strong>不设置</strong>: 如果不设置 actions
            属性，卡片底部不会显示操作区域
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

无标题

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

Content

ProCard Headless Props 说明：

style: 卡片样式对象，设置最大宽度
children: 卡片内容

Headless 特点：

无标题: 不设置 title 属性，卡片没有标题区域
简洁设计: 只显示内容区域，界面更加简洁
灵活布局: 适合作为容器组件使用

样式配置：

maxWidth: 设置最大宽度，避免在大屏幕上过宽
响应式: 在小屏幕上会自动调整宽度

与其他类型的区别：

有标题卡片: 设置 title 属性，显示标题区域
无标题卡片: 不设置 title 属性，只显示内容
分割卡片: 使用 split 属性进行分割布局

使用场景：

内容容器: 作为内容的容器组件
布局组件: 用于页面布局和内容分组
信息展示: 展示简单的信息内容
表单容器: 作为表单的容器组件

最佳实践：

内容清晰: 确保内容本身能够表达其用途
样式合理: 根据内容设置合适的样式
响应式设计: 考虑在不同屏幕尺寸下的显示效果

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard style={{ maxWidth: 300 }}>Content</ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Headless Props 说明：</h4>
        <ul>
          <li>
            <strong>style</strong>: 卡片样式对象，设置最大宽度
          </li>
          <li>
            <strong>children</strong>: 卡片内容
          </li>
        </ul>
        <h4>Headless 特点：</h4>
        <ul>
          <li>
            <strong>无标题</strong>: 不设置 title 属性，卡片没有标题区域
          </li>
          <li>
            <strong>简洁设计</strong>: 只显示内容区域，界面更加简洁
          </li>
          <li>
            <strong>灵活布局</strong>: 适合作为容器组件使用
          </li>
        </ul>
        <h4>样式配置：</h4>
        <ul>
          <li>
            <strong>maxWidth</strong>: 设置最大宽度，避免在大屏幕上过宽
          </li>
          <li>
            <strong>响应式</strong>: 在小屏幕上会自动调整宽度
          </li>
        </ul>
        <h4>与其他类型的区别：</h4>
        <ul>
          <li>
            <strong>有标题卡片</strong>: 设置 title 属性，显示标题区域
          </li>
          <li>
            <strong>无标题卡片</strong>: 不设置 title 属性，只显示内容
          </li>
          <li>
            <strong>分割卡片</strong>: 使用 split 属性进行分割布局
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>内容容器</strong>: 作为内容的容器组件
          </li>
          <li>
            <strong>布局组件</strong>: 用于页面布局和内容分组
          </li>
          <li>
            <strong>信息展示</strong>: 展示简单的信息内容
          </li>
          <li>
            <strong>表单容器</strong>: 作为表单的容器组件
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>内容清晰</strong>: 确保内容本身能够表达其用途
          </li>
          <li>
            <strong>样式合理</strong>: 根据内容设置合适的样式
          </li>
          <li>
            <strong>响应式设计</strong>: 考虑在不同屏幕尺寸下的显示效果
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

带边框

配置 variant 属性控制卡片边框样式，outlined 为带边框，borderless 为无边框。未传时跟随 ConfigProvider（与 antd Card 一致）。

Title

extra

Content

ProCard Props 说明：

title: 卡片标题，可以是字符串或 React 节点
extra: 卡片右上角操作区域，可以是字符串或 React 节点
tooltip: 卡片的提示信息
style: 卡片的样式对象
variant: 卡片变体样式，'outlined' 表示带边框的卡片样式
children: 卡片内容区域

Variant 说明：

outlined: 带边框的卡片样式，适合需要明确边界的场景
borderless: 无边框的卡片样式

带边框

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard
        title="Title"
        extra="extra"
        tooltip="This is a tooltip"
        style={{ maxWidth: 300 }}
        variant="outlined"
      >
        Content
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题，可以是字符串或 React 节点
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角操作区域，可以是字符串或 React
            节点
          </li>
          <li>
            <strong>tooltip</strong>: 卡片的提示信息
          </li>
          <li>
            <strong>style</strong>: 卡片的样式对象
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined'
            表示带边框的卡片样式
          </li>
          <li>
            <strong>children</strong>: 卡片内容区域
          </li>
        </ul>
        <h4>Variant 说明：</h4>
        <ul>
          <li>
            <strong>outlined</strong>: 带边框的卡片样式，适合需要明确边界的场景
          </li>
          <li>
            <strong>borderless</strong>: 无边框的卡片样式
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

antd Card

使用 antd Card 的 hover 阴影与 token。

ProCard

基础路径复用同一套 Card 样式管线。

浮出效果

import { ProCard } from '@ant-design/pro-components';
import { Card, ConfigProvider, Space } from 'antd';

const cardStyle = { width: 300 };

const Demo = () => (
  <ConfigProvider theme={{ cssVar: {} }}>
    <Space align="start" size={16} wrap>
      <Card
        title="antd Card"
        extra={<a>更多</a>}
        hoverable
        style={cardStyle}
        variant="outlined"
      >
        使用 antd Card 的 hover 阴影与 token。
      </Card>
      <ProCard
        title="ProCard"
        extra={<a>更多</a>}
        hoverable
        style={cardStyle}
        variant="outlined"
      >
        基础路径复用同一套 Card 样式管线。
      </ProCard>
    </Space>
  </ConfigProvider>
);

export default Demo;

页签

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

Tab placement：

top

Product One

Product Two

Product Three

Content Two

ProCard Tabs 动态位置 Props 说明：

tabs.tabPlacement: 标签页位置，可选值：'top' | 'bottom' | 'start' | 'end'
tabs.activeKey: 当前激活的标签页 key
tabs.items: 标签页配置数组
tabs.onChange: 标签页切换时的回调函数

Tab Position 位置说明：

top: 标签页显示在内容上方（默认）
bottom: 标签页显示在内容下方
start: 标签页显示在内容开始侧（LTR 为左侧，RTL 为右侧）
end: 标签页显示在内容结束侧（LTR 为右侧，RTL 为左侧）

Select 组件配置：

value: 当前选中的值
onChange: 值改变时的回调函数
popupMatchSelectWidth: 下拉菜单宽度是否与选择框宽度一致

状态管理：

tab: 使用 useState 管理当前激活的标签页
tabPlacement: 使用 useState 管理标签页位置
动态切换: 通过 Select 组件动态切换标签页位置

交互特点：

位置切换: 可以实时切换标签页的显示位置
状态保持: 切换位置时保持当前激活的标签页
响应式适配: 不同位置适合不同的屏幕尺寸

使用场景：

布局测试: 测试不同标签页位置的显示效果
响应式设计: 根据屏幕尺寸选择合适的标签页位置
用户偏好: 允许用户自定义标签页位置
内容展示: 根据内容特点选择合适的标签页位置

最佳实践：

位置选择: 根据内容长度和屏幕空间选择合适的位置
用户体验: 考虑用户的阅读习惯和操作便利性
响应式考虑: 在不同设备上测试标签页位置的显示效果

import type { ProCardTabsProps } from '@ant-design/pro-components';
import { ProCard } from '@ant-design/pro-components';
import { Select, Space } from 'antd';
import { useState } from 'react';

const { Option } = Select;

const Demo = () => {
  const [tab, setTab] = useState('tab2');
  const [tabPlacement, setTabPlacement] =
    useState<ProCardTabsProps['tabPlacement']>('top');

  return (
    <>
      <div>
        <Space style={{ marginBlockEnd: 16 }}>
          Tab placement：
          <Select
            value={tabPlacement}
            onChange={(value) => setTabPlacement(value)}
            popupMatchSelectWidth={false}
          >
            <Option value="top">top</Option>
            <Option value="bottom">bottom</Option>
            <Option value="start">start</Option>
            <Option value="end">end</Option>
          </Select>
        </Space>
        <ProCard
          tabs={{
            size:'medium',
            tabPlacement,
            activeKey: tab,
            items: [
              {
                label: `Product One`,
                key: 'tab1',
                children: `Content One`,
              },
              {
                label: `Product Two`,
                key: 'tab2',
                children: `Content Two`,
              },
              {
                label: `Product Three`,
                key: 'tab3',
                children: `Content Three`,
              },
            ],
            onChange: (key) => {
              setTab(key);
            },
          }}
        />
      </div>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Tabs 动态位置 Props 说明：</h4>
        <ul>
          <li>
            <strong>tabs.tabPlacement</strong>: 标签页位置，可选值：'top' |
            'bottom' | 'start' | 'end'
          </li>
          <li>
            <strong>tabs.activeKey</strong>: 当前激活的标签页 key
          </li>
          <li>
            <strong>tabs.items</strong>: 标签页配置数组
          </li>
          <li>
            <strong>tabs.onChange</strong>: 标签页切换时的回调函数
          </li>
        </ul>
        <h4>Tab Position 位置说明：</h4>
        <ul>
          <li>
            <strong>top</strong>: 标签页显示在内容上方（默认）
          </li>
          <li>
            <strong>bottom</strong>: 标签页显示在内容下方
          </li>
          <li>
            <strong>start</strong>: 标签页显示在内容开始侧（LTR 为左侧，RTL
            为右侧）
          </li>
          <li>
            <strong>end</strong>: 标签页显示在内容结束侧（LTR 为右侧，RTL
            为左侧）
          </li>
        </ul>
        <h4>Select 组件配置：</h4>
        <ul>
          <li>
            <strong>value</strong>: 当前选中的值
          </li>
          <li>
            <strong>onChange</strong>: 值改变时的回调函数
          </li>
          <li>
            <strong>popupMatchSelectWidth</strong>:
            下拉菜单宽度是否与选择框宽度一致
          </li>
        </ul>
        <h4>状态管理：</h4>
        <ul>
          <li>
            <strong>tab</strong>: 使用 useState 管理当前激活的标签页
          </li>
          <li>
            <strong>tabPlacement</strong>: 使用 useState 管理标签页位置
          </li>
          <li>
            <strong>动态切换</strong>: 通过 Select 组件动态切换标签页位置
          </li>
        </ul>
        <h4>交互特点：</h4>
        <ul>
          <li>
            <strong>位置切换</strong>: 可以实时切换标签页的显示位置
          </li>
          <li>
            <strong>状态保持</strong>: 切换位置时保持当前激活的标签页
          </li>
          <li>
            <strong>响应式适配</strong>: 不同位置适合不同的屏幕尺寸
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>布局测试</strong>: 测试不同标签页位置的显示效果
          </li>
          <li>
            <strong>响应式设计</strong>: 根据屏幕尺寸选择合适的标签页位置
          </li>
          <li>
            <strong>用户偏好</strong>: 允许用户自定义标签页位置
          </li>
          <li>
            <strong>内容展示</strong>: 根据内容特点选择合适的标签页位置
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>位置选择</strong>: 根据内容长度和屏幕空间选择合适的位置
          </li>
          <li>
            <strong>用户体验</strong>: 考虑用户的阅读习惯和操作便利性
          </li>
          <li>
            <strong>响应式考虑</strong>: 在不同设备上测试标签页位置的显示效果
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

卡片式页签

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

Product One

Product Two

Content One

ProCard Tabs Card 类型 Props 说明：

tabs.type: 标签页类型，'card' 表示卡片式标签页
tabs.items: 标签页配置数组

Tab Item 配置：

key: 标签页的唯一标识
label: 标签页标题
children: 标签页内容

Card 类型特点：

卡片样式: 标签页以卡片形式显示
视觉分离: 每个标签页都有独立的卡片边框
突出显示: 当前选中的标签页更加突出

与其他类型的区别：

line 类型: 默认类型，使用下划线标识当前标签
card 类型: 使用卡片样式，视觉分离更明显
editable-card 类型: 可编辑的卡片式标签页

使用场景：

产品展示: 展示不同产品的详细信息
功能模块: 展示不同的功能模块
内容分类: 对内容进行分类展示
设置页面: 不同设置选项的展示

最佳实践：

标签清晰: 确保标签标题清晰易懂
内容相关: 确保标签页内容与标题相关
数量控制: 避免过多的标签页影响用户体验

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard
        tabs={{
          type: 'card',
          items: [
            {
              key: 'tab1',
              label: 'Product One',
              children: 'Content One',
            },
            {
              key: 'tab2',
              label: 'Product Two',
              children: 'Content Two',
            },
          ],
        }}
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Tabs Card 类型 Props 说明：</h4>
        <ul>
          <li>
            <strong>tabs.type</strong>: 标签页类型，'card' 表示卡片式标签页
          </li>
          <li>
            <strong>tabs.items</strong>: 标签页配置数组
          </li>
        </ul>
        <h4>Tab Item 配置：</h4>
        <ul>
          <li>
            <strong>key</strong>: 标签页的唯一标识
          </li>
          <li>
            <strong>label</strong>: 标签页标题
          </li>
          <li>
            <strong>children</strong>: 标签页内容
          </li>
        </ul>
        <h4>Card 类型特点：</h4>
        <ul>
          <li>
            <strong>卡片样式</strong>: 标签页以卡片形式显示
          </li>
          <li>
            <strong>视觉分离</strong>: 每个标签页都有独立的卡片边框
          </li>
          <li>
            <strong>突出显示</strong>: 当前选中的标签页更加突出
          </li>
        </ul>
        <h4>与其他类型的区别：</h4>
        <ul>
          <li>
            <strong>line 类型</strong>: 默认类型，使用下划线标识当前标签
          </li>
          <li>
            <strong>card 类型</strong>: 使用卡片样式，视觉分离更明显
          </li>
          <li>
            <strong>editable-card 类型</strong>: 可编辑的卡片式标签页
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>产品展示</strong>: 展示不同产品的详细信息
          </li>
          <li>
            <strong>功能模块</strong>: 展示不同的功能模块
          </li>
          <li>
            <strong>内容分类</strong>: 对内容进行分类展示
          </li>
          <li>
            <strong>设置页面</strong>: 不同设置选项的展示
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>标签清晰</strong>: 确保标签标题清晰易懂
          </li>
          <li>
            <strong>内容相关</strong>: 确保标签页内容与标题相关
          </li>
          <li>
            <strong>数量控制</strong>: 避免过多的标签页影响用户体验
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

内部卡片

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

Horizontal Inner Card

Inner Card Title

Inner Card Content

Inner Card Title

Inner Card Content

Vertical Inner Card

Inner Card Title

Inner Card Content

Inner Card Title

Inner Card Content

ProCard Inner 类型 Props 说明：

title: 卡片标题
type: 卡片类型，'inner' 表示内部卡片
variant: 卡片变体样式，'outlined' 表示带边框
headerBordered: 是否显示头部边框
gutter: 间距设置，可以是数字或数组
direction: 排列方向，'column' 表示垂直排列

Type="inner" 特点：

内部卡片: 作为其他卡片的子卡片使用
视觉层次: 与父卡片形成视觉层次关系
样式适配: 样式会自动适配父卡片的主题

Gutter 间距配置：

数字值: 如 gutter=16，设置统一的间距
数组值: 如 gutter=016，分别设置水平和垂直间距
响应式: 间距会根据屏幕尺寸自动调整

Direction 方向配置：

row: 水平排列（默认）
column: 垂直排列

布局效果：

水平布局: 内部卡片水平排列，适合并排展示
垂直布局: 内部卡片垂直排列，适合堆叠展示
间距控制: 通过 gutter 控制卡片之间的间距

使用场景：

分组展示: 将相关内容分组展示
详细信息: 在父卡片中展示详细信息
配置面板: 构建复杂的配置面板
仪表盘: 构建数据仪表盘

最佳实践：

层次清晰: 确保父子卡片的层次关系清晰
内容相关: 内部卡片的内容应该与父卡片相关
间距合理: 设置合适的间距，避免过于拥挤或稀疏

import { ProCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <ProCard
        title="Horizontal Inner Card"
        variant="outlined"
        headerBordered
        gutter={16}
      >
        <ProCard title="Inner Card Title" type="inner" variant="outlined">
          Inner Card Content
        </ProCard>
        <ProCard title="Inner Card Title" type="inner" variant="outlined">
          Inner Card Content
        </ProCard>
      </ProCard>

      <ProCard
        title="Vertical Inner Card"
        variant="outlined"
        headerBordered
        direction="column"
        gutter={[0, 16]}
        style={{ marginBlockStart: 8 }}
      >
        <ProCard title="Inner Card Title" type="inner" variant="outlined">
          Inner Card Content
        </ProCard>
        <ProCard title="Inner Card Title" type="inner" variant="outlined">
          Inner Card Content
        </ProCard>
      </ProCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard Inner 类型 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>type</strong>: 卡片类型，'inner' 表示内部卡片
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
          <li>
            <strong>gutter</strong>: 间距设置，可以是数字或数组
          </li>
          <li>
            <strong>direction</strong>: 排列方向，'column' 表示垂直排列
          </li>
        </ul>
        <h4>Type="inner" 特点：</h4>
        <ul>
          <li>
            <strong>内部卡片</strong>: 作为其他卡片的子卡片使用
          </li>
          <li>
            <strong>视觉层次</strong>: 与父卡片形成视觉层次关系
          </li>
          <li>
            <strong>样式适配</strong>: 样式会自动适配父卡片的主题
          </li>
        </ul>
        <h4>Gutter 间距配置：</h4>
        <ul>
          <li>
            <strong>数字值</strong>: 如 gutter={16}，设置统一的间距
          </li>
          <li>
            <strong>数组值</strong>: 如 gutter={[0, 16]}，分别设置水平和垂直间距
          </li>
          <li>
            <strong>响应式</strong>: 间距会根据屏幕尺寸自动调整
          </li>
        </ul>
        <h4>Direction 方向配置：</h4>
        <ul>
          <li>
            <strong>row</strong>: 水平排列（默认）
          </li>
          <li>
            <strong>column</strong>: 垂直排列
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>水平布局</strong>: 内部卡片水平排列，适合并排展示
          </li>
          <li>
            <strong>垂直布局</strong>: 内部卡片垂直排列，适合堆叠展示
          </li>
          <li>
            <strong>间距控制</strong>: 通过 gutter 控制卡片之间的间距
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>分组展示</strong>: 将相关内容分组展示
          </li>
          <li>
            <strong>详细信息</strong>: 在父卡片中展示详细信息
          </li>
          <li>
            <strong>配置面板</strong>: 构建复杂的配置面板
          </li>
          <li>
            <strong>仪表盘</strong>: 构建数据仪表盘
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>层次清晰</strong>: 确保父子卡片的层次关系清晰
          </li>
          <li>
            <strong>内容相关</strong>: 内部卡片的内容应该与父卡片相关
          </li>
          <li>
            <strong>间距合理</strong>: 设置合适的间距，避免过于拥挤或稀疏
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

竖向步骤示例

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

Fill in Basic Information

Configure Template

Configure Access

Configure Deployment and Scheduling

Preview

Traffic Usage

ProCard 与 Steps 集成 Props 说明：

split: 分割方式，根据响应式状态自动调整
variant: 卡片变体样式，'outlined' 表示带边框
style: 卡片样式对象，设置固定高度
colSpan: 栅格列数，响应式时自动调整

Steps 组件配置：

orientation: 步骤条方向，响应式时自动调整
size: 步骤条尺寸，'small' 表示小尺寸
current: 当前步骤索引
items: 步骤项配置数组
style: 步骤条样式，设置高度为 100%

Button 组件配置：

type: 按钮类型，'primary' 表示主要按钮
onClick: 点击事件处理函数
disabled: 是否禁用按钮

响应式布局特点：

断点控制: 当容器宽度小于 596px 时切换布局
分割方式: 大屏幕使用垂直分割，小屏幕使用水平分割
步骤方向: 大屏幕使用垂直步骤，小屏幕使用水平步骤
栅格适配: colSpan 根据响应式状态自动调整

状态管理：

current: 使用 useState 管理当前步骤状态
responsive: 使用 useState 管理响应式状态
步骤控制: 通过按钮控制步骤的前进和后退

使用场景：

向导页面: 构建多步骤的向导页面
配置页面: 分步骤配置复杂功能
表单流程: 多步骤表单填写流程
设置页面: 分步骤设置系统参数

最佳实践：

步骤清晰: 确保每个步骤的标题清晰易懂
状态同步: 确保 Steps 和按钮状态同步
响应式设计: 确保在不同屏幕尺寸下都有良好的体验

import { ProCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { Button, Space, Steps } from 'antd';
import { useState } from 'react';

const Demo = () => {
  const [current, setCurrent] = useState(0);
  const [responsive, setResponsive] = useState(false);
  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          split={responsive ? 'horizontal' : 'vertical'}
          variant="outlined"
          style={{ height: 320 }}
        >
          <ProCard colSpan={responsive ? 24 : 6}>
            <Steps
              orientation={responsive ? 'horizontal' : 'vertical'}
              size="small"
              current={current}
              style={{ height: '100%' }}
              items={[
                { title: 'Fill in Basic Information' },
                { title: 'Configure Template' },
                { title: 'Configure Access' },
                { title: 'Configure Deployment and Scheduling' },
                { title: 'Preview' },
              ]}
            />
          </ProCard>
          <ProCard title="Traffic Usage" colSpan={responsive ? 24 : 18}>
            <Space>
              <Button
                key="primary"
                type="primary"
                onClick={() => setCurrent(current + 1)}
                disabled={current === 5}
              >
                Next
              </Button>
              <Button
                key="pre"
                onClick={() => setCurrent(current - 1)}
                disabled={current === 0}
              >
                Previous
              </Button>
            </Space>
          </ProCard>
        </ProCard>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 与 Steps 集成 Props 说明：</h4>
        <ul>
          <li>
            <strong>split</strong>: 分割方式，根据响应式状态自动调整
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象，设置固定高度
          </li>
          <li>
            <strong>colSpan</strong>: 栅格列数，响应式时自动调整
          </li>
        </ul>
        <h4>Steps 组件配置：</h4>
        <ul>
          <li>
            <strong>orientation</strong>: 步骤条方向，响应式时自动调整
          </li>
          <li>
            <strong>size</strong>: 步骤条尺寸，'small' 表示小尺寸
          </li>
          <li>
            <strong>current</strong>: 当前步骤索引
          </li>
          <li>
            <strong>items</strong>: 步骤项配置数组
          </li>
          <li>
            <strong>style</strong>: 步骤条样式，设置高度为 100%
          </li>
        </ul>
        <h4>Button 组件配置：</h4>
        <ul>
          <li>
            <strong>type</strong>: 按钮类型，'primary' 表示主要按钮
          </li>
          <li>
            <strong>onClick</strong>: 点击事件处理函数
          </li>
          <li>
            <strong>disabled</strong>: 是否禁用按钮
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换布局
          </li>
          <li>
            <strong>分割方式</strong>: 大屏幕使用垂直分割，小屏幕使用水平分割
          </li>
          <li>
            <strong>步骤方向</strong>: 大屏幕使用垂直步骤，小屏幕使用水平步骤
          </li>
          <li>
            <strong>栅格适配</strong>: colSpan 根据响应式状态自动调整
          </li>
        </ul>
        <h4>状态管理：</h4>
        <ul>
          <li>
            <strong>current</strong>: 使用 useState 管理当前步骤状态
          </li>
          <li>
            <strong>responsive</strong>: 使用 useState 管理响应式状态
          </li>
          <li>
            <strong>步骤控制</strong>: 通过按钮控制步骤的前进和后退
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>向导页面</strong>: 构建多步骤的向导页面
          </li>
          <li>
            <strong>配置页面</strong>: 分步骤配置复杂功能
          </li>
          <li>
            <strong>表单流程</strong>: 多步骤表单填写流程
          </li>
          <li>
            <strong>设置页面</strong>: 分步骤设置系统参数
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>步骤清晰</strong>: 确保每个步骤的标题清晰易懂
          </li>
          <li>
            <strong>状态同步</strong>: 确保 Steps 和按钮状态同步
          </li>
          <li>
            <strong>响应式设计</strong>: 确保在不同屏幕尺寸下都有良好的体验
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

API

ProCard 兼容 antd Card API，以下 props 与 antd Card 保持一致。

参数	说明	类型	默认值
cover	卡片封面	`React.ReactNode`	-
classNames	语义化 classNames，结构同 antd Card	`{ root?, header?, body?, extra?, title?, actions?, cover? }`	-
title	标题	`React.ReactNode`	-
subTitle	副标题	`React.ReactNode`	-
tooltip	标题说明	`string \| LabelTooltipType`	-
extra	右上角自定义区域	`React.ReactNode`	-
layout	内容布局，支持垂直居中	`default` \| `center`	default
type	卡片类型	`default` \| `inner`	default
direction	指定 Flex 方向，仅在嵌套子卡片时有效，默认方向为 row 横向	`column` \| `row`	row
wrap	是否自动换行，仅在嵌套子卡片时有效	`boolean`	false
size	卡片尺寸	`default` \| `small`	default
loading	加载中，支持自定义 loading 样式	`boolean` \| `ReactNode`	false
colSpan	栅格布局宽度，24 栅格，支持指定宽度 px 或百分比，支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`, 仅在嵌套的子卡片上设置有效。	`number \| string \| Partial<Record<Breakpoint, number \| string>>`	24
colStyle	栅格样式	`CSSProperties`	-
gutter	栅格间距	`number \| Partial<Record<Breakpoint, number>> \| [number, number]`	0
split	拆分卡片的方式	`vertical` \| `horizontal`	-
actions	操作按钮	`React.ReactNode[] \| React.ReactNode`	-
ghost	幽灵模式，即是否取消卡片内容区域的 padding 和卡片的背景颜色。	`boolean`	false
variant	卡片变体，与 antd Card 一致；未传时跟随 ConfigProvider（`card.variant` → 全局 `variant` → antd 默认）	`'outlined' \| 'borderless'`	-
boxShadow	是否显示卡片阴影	`boolean`	-
styles	语义化 styles，结构同 antd Card	`{ root?, header?, body?, extra?, title?, actions?, cover? }`	-
headerBordered	页头是否有分割线	`boolean`	false
hoverable	鼠标移过时可浮起	`boolean`	false
collapsed	受控属性，是否折叠	`boolean`	false
collapsible	配置是否可折叠，受控时无效	`icon` \| `header` \| `boolean`	false
collapsibleIconRender	替换默认折叠图标	`({ collapsed }: { collapsed: boolean }) => React.ReactNode`	-
defaultCollapsed	默认折叠，受控时无效	`boolean`	false
onCollapse	收起卡片的事件，受控时无效	`(collapsed: boolean) => void`	-
prefixCls	前缀	`string`	-
ref	ProCard 的 ref	`React.Ref<HTMLDivElement \| undefined>`	-
checked	是否展示选中样式	`boolean`	false
onChecked	选中改变	`(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void`	-
tabs	标签栏配置	见下面 ProCardTabs	-

ProCardTabs

参数	说明	类型	默认值
activeKey	当前选中项	string	-
type	页签的基本样式，可选 `line`、`card`、 `editable-card` 类型，透传 antd Tabs	string	`line`
onChange	回调	`(activeKey: string) => void;`	-
items	基于 antd 拓展的页签的基本配置，必填	`ItemsProps`	-

更多属性见 antd Tab API 描述。

ItemsProps

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

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

ProCard.TabPane

已废弃：该参数已被 Items 所替代，请使用 ItemsProps 配置新的内容

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

ProCard.Divider

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

参数	说明	类型	默认值
orientation	分隔类型	`horizontal \| vertical`	-

ProCard.Group

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

参数	说明	类型	默认值
split	子卡片之间的分割线方向	`'vertical'` \| `'horizontal'`	-
direction	子卡片排列方向	`'row'` \| `'column'`	`'row'`

#ProCard - 高级卡片

#何时使用

#代码演示

#枚举属性切换

ProCard ColSpan 配置 Props 说明：

子卡片配置：

ColSpan 配置方式：

响应式断点配置：

布局特点：

Ghost 模式特点：

使用场景：

最佳实践：

ProCard 响应式布局 Props 说明：

子卡片配置：

ColSpan 配置方式：

响应式断点：

布局特点：

使用场景：

最佳实践：

#卡片切分

ProCard 响应式分割布局 Props 说明：

子卡片配置：

响应式分割特点：

ColSpan 配置：

布局效果：

使用场景：

最佳实践：

#左右分栏

ProCard Split 布局 Props 说明：

ProCard 子组件配置：

ColSpan 百分比特点：

布局效果：

使用场景：

最佳实践：

#复杂切分

ProCard 复杂分割布局 Props 说明：

Split 分割方式：

嵌套布局结构：

响应式布局特点：

布局效果：

使用场景：

最佳实践：

#ProCard.Group 分割线

#栅格间隔

#多行卡片

ProCard 多行布局 Props 说明：

子卡片配置：

响应式 ColSpan 配置：

Wrap 换行特点：

布局效果：

使用场景：

最佳实践：

#分组展示

#标题带分割线

#可折叠

ProCard 可折叠功能 Props 说明：

Collapsible 配置方式：

自定义图标配置：

事件处理：

样式变体：

使用场景：

最佳实践：

#幽灵模式

#卡片组展开

#内容居中

ProCard Layout Props 说明：

Layout 布局方式：

Direction 排列方向：

样式配置：

布局效果：

使用场景：

最佳实践：

#加载中

ProCard Loading Props 说明：

Loading 使用方式：

默认 Loading 效果：

自定义 Loading：

使用场景：

最佳实践：

#操作项

ProCard - 高级卡片

何时使用

代码演示

枚举属性切换

卡片切分

左右分栏

复杂切分

ProCard.Group 分割线

栅格间隔

多行卡片

分组展示

标题带分割线

可折叠

幽灵模式

卡片组展开

内容居中

加载中

操作项

无标题

带边框

页签

卡片式页签

内部卡片

竖向步骤示例

API

ProCardTabs

ItemsProps

ProCard.TabPane

ProCard.Divider

ProCard.Group