@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/card/src/components/card.en-US.md

@@ -0,0 +1,219 @@
+---
+title: ProCard
+atomId: ProCard
+nav:
+  title: Components
+---
+
+# 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.
+
+<code src="../demos/basic.tsx" background="var(--main-bg-color)" oldtitle="Basic Card"></code>
+
+### 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.
+
+<code src="../demos/colspan.tsx" background="var(--main-bg-color)" oldtitle="Grid Layout"></code>
+
+### Responsive
+
+`colSpan` supports [Grid Responsive Layout](https://ant.design/components/grid-cn/#components-grid-demo-responsive) 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 }`.
+
+<code src="../demos/responsive.tsx" background="var(--main-bg-color)" oldtitle="responsive"></code>
+
+### 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.
+
+<code src="../demos/split2.tsx" background="var(--main-bg-color)" oldtitle="Card Splitting"></code>
+
+### 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.
+
+<code src="../demos/split23.tsx" background="var(--main-bg-color)" oldtitle="Left and right columns"></code>
+
+### Complex segmentation
+
+Through the card segmentation capability, we can achieve more complex data presentation forms.
+
+<code src="../demos/split.tsx" background="var(--main-bg-color)" oldtitle="Complex Split"></code>
+
+### 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 }]`.
+
+<code src="../demos/gutter.tsx" background="var(--main-bg-color)" oldtitle="Grid Gutter"></code>
+
+### 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.
+
+<code src="../demos/multipleLine.tsx" background="var(--main-bg-color)" oldtitle="Multiple Line Cards"></code>
+
+### group display
+
+You can nest card components to group content, and `Divider` subcomponents to separate those content.
+
+<code src="../demos/divider.tsx" background="var(--main-bg-color)" oldtitle="Group Indicator"></code>
+
+### Title with dividing line
+
+When adding a divider it automatically increases the height of the header to separate it from the content area.
+
+<code src="../demos/headerBordered.tsx" background="var(--main-bg-color)" oldtitle="Title with dividing line"></code>
+
+### 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.
+
+<code src="../demos/collapsible.tsx" background="var(--main-bg-color)" oldtitle="collapsible"></code>
+
+### Deck expansion
+
+With the `ghost` ghost mode and collapsible ability, the card deck can be expanded.
+
+<code src="../demos/group.tsx" background="var(--main-bg-color)" oldtitle="Card group expansion"></code>
+
+### 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.
+
+<code src="../demos/layout.tsx" background="var(--main-bg-color)" oldtitle="Center content"></code>
+
+### 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.
+
+<code src="../demos/loading.tsx" background="var(--main-bg-color)" oldtitle="Loading"></code>
+
+### Action items
+
+Configure the `actions` property to configure card actions.
+
+<code src="../demos/actions.tsx" background="var(--main-bg-color)" oldtitle="Actions"></code>
+
+### Untitled
+
+The header is automatically hidden when there is no content.
+
+<code src="../demos/headless.tsx" background="var(--main-bg-color)" oldtitle="Untitled"></code>
+
+### with border
+
+Configure the `bordered` property to control whether the card is bordered.
+
+<code src="../demos/bordered.tsx" oldtitle="With border"></code>
+
+### floating effect
+
+<code src="../demos/hoverable.tsx" oldtitle="Flyover" desc="Configure popover via hoverable" background="var(--main-bg-color)"></code>
+
+### bookmark
+
+Configure the `tabs` property with the `ProCard.TabPane` subcomponent to configure the tab bar of the card.
+
+<code src="../demos/tabs.tsx" background="var(--main-bg-color)" oldtitle="tabs"></code>
+
+### Card Tab
+
+Set the `type` of `tab` to `card` to configure card-style tabs.
+
+<code src="../demos/tabs-card.tsx" background="var(--main-bg-color)" oldtitle="Card Tabs"></code>
+
+### Internal Cards
+
+Can be placed inside a card to display information in a multi-level structure.
+
+<code src="../demos/inner.tsx" oldtitle="Inner Card"></code>
+
+### Vertical step example
+
+The `Steps` component is combined with the `ProCard` component to complete the vertical step example.
+
+<code src="../demos/steps-v.tsx" background="var(--main-bg-color)" oldtitle="Example of vertical steps"></code>
+
+## API
+
+| Parameters | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| title | title | `React.ReactNode` | - |  |
+| subTitle | Subtitle | `React.ReactNode` | - |  |
+| tooltip | Icon hover prompt information on the right side of the title | `string` | - |  |
+| headStyle | The style of the header | `CSSProperties` | - |  |
+| bodyStyle | style of the content area | `CSSProperties` | - |  |
+| extra | Custom area in the upper right corner | `React.ReactNode` | - |  |
+| layout | Content layout, supports vertical centering | `default` \| `center` | default |  |
+| loading | Loading, support custom loading style | `boolean` \| `ReactNode` | false |  |
+| colSpan | Grid layout width, 24 grid, supports specifying width px or percentage, supports responsive object writing `{ xs: 8, sm: 16, md: 24}`, only set on nested subcards efficient. | `number` \| `string` | 24 |  |
+| gutter | Number or use array form to set \[horizontal spacing, vertical spacing], supports responsive object notation `{ xs: 8, sm: 16, md: 24}` | `number` \| `array` | 0 |  |
+| split | Direction to split the card | `vertical` \| `horizontal` | - |  |
+| type | card type | `inner` \| `default` | - |  |
+| size | card size | `default` \| `small` | - |  |
+| actions | Card action group, located at the bottom of the card | `Array&lt;ReactNode>` | - |  |
+| direction | Specifies the flex direction, only valid when subcards are nested, the default direction is row horizontal | `column` | - |  |
+| wrap | Whether to support line wrapping, only valid when subcards are nested | false | - | 1.12.0 |
+| bordered | whether to have a border | `boolean` | false |  |
+| ghost | Ghost mode, that is, whether to cancel the padding of the card content area and the background color of the card. | `boolean` | false |  |
+| headerBordered | Whether the header has a dividing line | `boolean` | false |  |
+| collapsed | Controlled property, whether to collapse | `boolean` | false |  |
+| collapsible | Whether the configuration is collapsible, invalid when controlled | `boolean` | false |  |
+| collapsibleIconRender | Replaces default collapsed icon | `({ collapsed }: { collapsed: boolean }) => React.ReactNode` | - |  |
+| defaultCollapsed | Default collapsing, invalid when controlled | `boolean` | false |  |
+| onCollapse | Collapsed card event, invalid when controlled | `(collapsed: boolean) => void` | - |  |
+| tabs | Tab configuration | See below ProCardTabs | - |  |
+
+### ProCardTabs
+
+| parameter | description | type | default value |
+| :-- | :-- | :-- | :-- |
+| activeKey | currently selected item | string | - |
+| type | The basic style of the tab, optional `line`, `card`, `editable-card` type | string | inline |
+| onChange | callback | `(activeKey: string) => void;` | - |
+
+- For more properties, see antd [Tab](https://ant.design/components/tabs-cn/#Tabs) API description.
+
+### ProCard.TabPane
+
+All properties of [Tabs.TabPane](https://ant.design/components/tabs-cn/#Tabs.TabPane) are supported.
+
+| parameter | description | type | default value |
+| :-- | :-- | :-- | :-- |
+| key | Corresponding to activeKey, used to calibrate whether to select and dom update, must not repeat, otherwise it will cause abnormal performance | `string` | - |
+| tab | Tab header display text | `ReactNode` | - |
+| disabled | unavailable | `boolean` | false |
+| cardProps | ProCard card property passthrough | `ProCard` | - |
+
+### ProCard.Divider
+
+Used to separate when grouping content.
+
+| parameter | description     | type                     | default value |
+| --------- | --------------- | ------------------------ | ------------- |
+| type      | Separation type | `horizontal \| vertical` | -             |
+
+### ProCard.Group
+
+The property is the same as ProCard, but the card content margin will be cancelled, which is used to group multiple cards.

package/packages/card/src/components/card.md

@@ -0,0 +1,212 @@
+---
+title: ProCard - 高级卡片
+atomId: ProCard
+---
+
+# ProCard - 高级卡片
+
+页内容器卡片，提供标准卡片样式，卡片切分以及栅格布局能力。ProCard 创造性地将 `Col`, `Row`, `Card`, `Tabs` 等组件实现结合在一起，让你仅用一个组件就能够完成卡片相关的各种布局。
+
+- 如果你还需要结合图表一起使用，可以参考 `StatisticCard` 指标卡组件，他是 ProCard 的进一步封装。
+- 若您也需要封装 `ProCard`，注意需要透出 `isProCard=true` 的静态属性让 ProCard 可以识别为同一个元素。
+
+## 何时使用
+
+- 需要一个标准卡片容纳内容时。
+- 需要多个卡片栅格，gutter 布局时。
+- 需要进行卡片内切分布局时。
+- 需要卡片可折叠时。
+
+## 代码演示
+
+<code src="../demos/basic.tsx" background="var(--main-bg-color)" title="基础卡片" description="当单独使用时 `ProCard` 就是一个普通的卡片。"></code>
+
+<code src="../demos/colspan.tsx" background="var(--main-bg-color)" title="栅格布局" description="当嵌套子卡片时, 组件会自动切换为 `flex` 弹性盒布局，你可以将 `direction`设置为`column`来指定 Flex 方向，你还可以通过配置 `ghost` 属性为 `true` 来去掉背景色和 padding 方便页内布局。"></code>
+
+<code src="../demos/responsive.tsx" background="var(--main-bg-color)" title="响应式" description="`colSpan` 支持 antd 定义的[栅格式响应布局](https://ant.design/components/grid-cn/#components-grid-demo-responsive)。预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。如果要支持响应式，可以写成 `{ xs: 4, sm: 8, md: 10, lg: 12 }`。"></code>
+
+### 卡片切分
+
+布局模式下通过配置 `split` 可以方便地切分卡片，可以进行任意的分栏，不管是横切还是竖切都非常便利，切分出来的分栏仍然保有卡片的特性，高度自动撑满。注意：
+
+- 切分时父卡片的内容 `padding` 会被设置为 0。
+- 切分时子卡片的 `border-radius`会被设置为 0。
+
+<code src="../demos/split2.tsx" background="var(--main-bg-color)" ></code>
+
+### 左右分栏
+
+通过卡片切分能力我们很容易实现左右分栏的效果，很适合左侧是列表，右侧是详情的结构。
+
+<code src="../demos/split23.tsx" background="var(--main-bg-color)"  ></code>
+
+### 复杂切分
+
+通过卡片切分能力我们可以实现更加复杂的数据展现形式。
+
+<code src="../demos/split.tsx" background="var(--main-bg-color)"  ></code>
+
+### 栅格间隔
+
+栅格常常需要和间隔进行配合，你可以使用 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔 (n 是自然数)，如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。如果需要垂直间距，可以写成数组形式 `[水平间距, 垂直间距][16, { xs: 8, sm: 16, md: 24, lg: 32 }]`。
+
+<code src="../demos/gutter.tsx" background="var(--main-bg-color)"  ></code>
+
+### 多行卡片
+
+默认卡片布局不可换行，你可以配置 `wrap` 为 `true` 来让多个卡片之间可以换行，适用于多个卡片排版的情况。
+
+<code src="../demos/multipleLine.tsx" background="var(--main-bg-color)"  ></code>
+
+### 分组展示
+
+你可以嵌套卡片组件来将内容分组，以及 `Divider` 子组件来分隔这些内容。
+
+<code src="../demos/divider.tsx" background="var(--main-bg-color)" ></code>
+
+### 标题带分割线
+
+当添加分隔线时会自动增加标题的高度与内容区域分开。
+
+<code src="../demos/headerBordered.tsx" background="var(--main-bg-color)"  ></code>
+
+### 可折叠
+
+- 你可以使用 `collapsible` 来配置卡片是否可折叠，通过 `defaultCollapsed` 属性配置是否默认折叠。
+- 或者你可以通过 `collapsed` 属性受控进行自定义。
+
+<code src="../demos/collapsible.tsx" background="var(--main-bg-color)" ></code>
+
+### 卡片组展开
+
+配合 `ghost`幽灵模式和可折叠能力可以实现卡片组展开。
+
+<code src="../demos/group.tsx" background="var(--main-bg-color)"  ></code>
+
+### 内容居中
+
+配置 `layout` 属性为 `center` 控制内容垂直居中，设置居中时内容部分转为 `flex` 布局，可以使用 `direction` 控制 `flex` 方向。
+
+<code src="../demos/layout.tsx" background="var(--main-bg-color)"  ></code>
+
+### 加载中
+
+配置 `loading`属性为`true`控制卡片加载中，也可以传入 DOM 给`loading`来自定义 loading 展示。
+
+<code src="../demos/loading.tsx" background="var(--main-bg-color)"  ></code>
+
+### 操作项
+
+配置 `actions` 属性来配置卡片操作项。
+
+<code src="../demos/actions.tsx" background="var(--main-bg-color)"  ></code>
+
+### 无标题
+
+头部没有内容时会自动隐藏。
+
+<code src="../demos/headless.tsx" background="var(--main-bg-color)"  ></code>
+
+### 带边框
+
+配置 `bordered` 属性控制是否卡片带边框。
+
+<code src="../demos/bordered.tsx" background="var(--main-bg-color)"></code>
+
+<code src="../demos/hoverable.tsx" title="浮出效果" desc="通过 hoverable 配置浮出效果" background="var(--main-bg-color)" ></code>
+
+### 页签
+
+配置 `tabs` 属性配合 `ProCard.TabPane` 子组件可以配置卡片的标签栏。
+
+<code src="../demos/tabs.tsx" background="var(--main-bg-color)" ></code>
+
+### 卡片式页签
+
+配置 `tab` 的 `type` 为 `card` 来配置卡片式页签。
+
+<code src="../demos/tabs-card.tsx" background="var(--main-bg-color)" ></code>
+
+### 内部卡片
+
+可以放在卡片内部，展示多层级结构的信息。
+
+<code src="../demos/inner.tsx" background="var(--main-bg-color)"></code>
+
+### 竖向步骤示例
+
+`Steps` 组件结合 `ProCard` 组件完成竖向步骤示例。
+
+<code src="../demos/steps-v.tsx" background="var(--main-bg-color)"  ></code>
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| title | 标题 | `React.ReactNode` | - |  |
+| subTitle | 副标题 | `React.ReactNode` | - |  |
+| tooltip | 标题右侧图标 hover 提示信息 | `string` | - |  |
+| headStyle | 标题的 style 样式 | `CSSProperties` | - |  |
+| bodyStyle | 内容区的 style 样式 | `CSSProperties` | - |  |
+| extra | 右上角自定义区域 | `React.ReactNode` | - |  |
+| layout | 内容布局，支持垂直居中 | `default` \| `center` | default |  |
+| loading | 加载中，支持自定义 loading 样式 | `boolean` \| `ReactNode` | false |  |
+| colSpan | 栅格布局宽度，24 栅格，支持指定宽度 px 或百分比，支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`, 仅在嵌套的子卡片上设置有效。 | `number` \| `string` | 24 |  |
+| gutter | 数字或使用数组形式同时设置 \[水平间距，垂直间距], 支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | `number` \| `array` | 0 |  |
+| split | 拆分卡片的方向 | `vertical` \| `horizontal` | - |  |
+| type | 卡片类型 | `inner` \| `default` | - |  |
+| size | 卡片尺寸 | `default` \| `small` | - |  |
+| actions | 卡片操作组，位置在卡片底部 | `Array&lt;ReactNode>` | - |  |
+| direction | 指定 Flex 方向，仅在嵌套子卡片时有效，默认方向为 row 横向 | `column` | - |  |
+| wrap | 是否支持换行，仅在嵌套子卡片时有效 | false | - | 1.12.0 |
+| bordered | 是否有边框 | `boolean` | false |  |
+| ghost | 幽灵模式，即是否取消卡片内容区域的 padding 和 卡片的背景颜色。 | `boolean` | false |  |
+| headerBordered | 页头是否有分割线 | `boolean` | false |  |
+| collapsed | 受控属性，是否折叠 | `boolean` | false |  |
+| collapsible | 配置是否可折叠，受控时无效 | `boolean` | false |  |
+| collapsibleIconRender | 替换默认折叠图标 | `({ collapsed }: { collapsed: boolean }) => React.ReactNode` | - |  |
+| defaultCollapsed | 默认折叠，受控时无效 | `boolean` | false |  |
+| onCollapse | 收起卡片的事件，受控时无效 | `(collapsed: boolean) => void` | - |  |
+| tabs | 标签页配置 | 见下面 ProCardTabs | - |  |
+
+### ProCardTabs
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :-- | :-- | :-- | :-- |
+| activeKey | 当前选中项 | string | - |
+| type | 页签的基本样式，可选 `line`、`card`、`editable-card` 类型 | string | inline |
+| onChange | 回调 | `(activeKey: string) => void;` | - |
+| items | 基于 antd 拓展的页签的基本配置，必填 | `ItemsProps` | - |
+
+- 更多属性见 antd [Tab](https://ant.design/components/tabs-cn/#Tabs) API 描述。
+
+### ItemsProps
+
+支持 [Tabs](https://ant.design/components/tabs-cn/#Tabs.TabPane) 下页签的所有属性。
+
+| 参数      | 说明                 | 类型      | 默认值 |
+| :-------- | :------------------- | :-------- | :----- |
+| cardProps | ProCard 卡片属性透传 | `ProCard` | -      |
+
+### ProCard.TabPane
+
+> 该参数即将被 Items 所平替，请及时更新使用 ItemsProps 配置新的内容
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :-- | :-- | :-- | :-- |
+| key | 对应 activeKey，用于标定是否选中和 dom 更新，一定不要重复，不然会造成表现异常 | `string` | - |
+| tab | 选项卡头显示文字 | `ReactNode` | - |
+| disabled | 不可用 | `boolean` | false |
+| cardProps | ProCard 卡片属性透传 | `ProCard` | - |
+
+### ProCard.Divider
+
+用于在将内容进行分组时进行分隔。
+
+| 参数 | 说明     | 类型                     | 默认值 |
+| ---- | -------- | ------------------------ | ------ |
+| type | 分隔类型 | `horizontal \| vertical` | -      |
+
+### ProCard.Group
+
+属性同 ProCard，会取消卡片内容边距，用于将多个卡片进行分组。

package/packages/card/src/demos/actions.tsx

@@ -0,0 +1,59 @@
+import {
+  EditOutlined,
+  EllipsisOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import { ProCard } from '@ant-design/pro-components';
+import { Space } from 'antd';
+
+export default () => {
+  return (
+    <Space>
+      <ProCard
+        title="Actions 操作项"
+        style={{ maxWidth: 300 }}
+        bordered
+        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="单独的 Actions 操作项"
+        style={{ maxWidth: 300 }}
+        bordered
+        actions={
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 12,
+              flex: 1,
+              gap: 8,
+            }}
+          >
+            <SettingOutlined key="setting" />
+            设置
+          </div>
+        }
+      >
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+
+      <ProCard bordered title="无 Actions 操作项" style={{ maxWidth: 300 }}>
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+    </Space>
+  );
+};

package/packages/card/src/demos/basic.tsx

@@ -0,0 +1,54 @@
+import {
+  ProCard,
+  ProFormGroup,
+  ProFormSwitch,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard
+        title="默认尺寸"
+        bordered
+        extra={
+          <ProFormGroup>
+            <ProFormSwitch
+              name="Enable"
+              noStyle
+              checkedChildren={'启用'}
+              unCheckedChildren={'禁用'}
+            />
+          </ProFormGroup>
+        }
+        tooltip="这是提示"
+        style={{ maxWidth: 300 }}
+      >
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+      <ProCard
+        title="带卡片阴影"
+        extra="extra"
+        tooltip="这是提示"
+        style={{ maxWidth: 300 }}
+        boxShadow
+      >
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+      <ProCard
+        title="小尺寸卡片"
+        extra="extra"
+        tooltip="这是提示"
+        style={{ maxWidth: 300, marginBlockStart: 24 }}
+        size="small"
+      >
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/bordered.tsx

@@ -0,0 +1,15 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProCard
+      title="标题"
+      extra="extra"
+      tooltip="这是提示"
+      style={{ maxWidth: 300 }}
+      bordered
+    >
+      内容
+    </ProCard>
+  );
+};

package/packages/card/src/demos/collapsible.tsx

@@ -0,0 +1,110 @@
+import { RightOutlined } from '@ant-design/icons';
+import { ProCard } from '@ant-design/pro-components';
+import { Button } 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="可折叠"
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
+      <ProCard
+        title="可折叠"
+        bordered
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
+      <ProCard
+        bordered
+        size="small"
+        title="可折叠"
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
+      <ProCard
+        title="可折叠-受控自定义"
+        extra={
+          <RightOutlined
+            rotate={!collapsed ? 90 : undefined}
+            onClick={() => {
+              setCollapsed(!collapsed);
+            }}
+          />
+        }
+        style={{ marginBlockStart: 16 }}
+        headerBordered
+        collapsed={collapsed}
+      >
+        内容
+      </ProCard>
+      <ProCard
+        title="可折叠-图标自定义"
+        collapsibleIconRender={({
+          collapsed: buildInCollapsed,
+        }: {
+          collapsed: boolean;
+        }) => (buildInCollapsed ? <span>收起 - </span> : <span>展开 - </span>)}
+        style={{ marginBlockStart: 16 }}
+        headerBordered
+        collapsible
+        defaultCollapsed
+      >
+        内容
+      </ProCard>
+    </div>
+  );
+};