pro-components-guide
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseProComponents Guide & Documentation
ProComponents 指南与文档
当用户询问 Ant Design Pro 组件、构建后台页面或需要查找具体组件参数时，请参考以下目录。
关键指令：如果需要编写详细代码且不确定某个 Props（如 的返回值格式、 的具体配置），请使用浏览工具（Browsing Tool）读取对应的 URL。
requestcolumns当用户询问 Ant Design Pro 组件、构建后台页面或需要查找具体组件参数时，请参考以下目录。
关键指令：如果需要编写详细代码且不确定某个 Props（如 的返回值格式、 的具体配置），请使用浏览工具（Browsing Tool）读取对应的 URL。
requestcolumns1. Layout 布局组件
1. Layout 布局组件
核心组件:
ProLayout- 文档链接: https://pro-components.antdigital.dev/components/layout
- 包含:
- : 解决侧边栏、顶部导航、面包屑等全局布局。
ProLayout - : 页面的标准容器，自动生成面包屑和标题。
PageContainer - : 底部固定工具栏。
FooterToolbar - : 水印组件。
WaterMark
核心组件:
ProLayout- 文档链接: https://pro-components.antdigital.dev/components/layout
- 包含:
- : 解决侧边栏、顶部导航、面包屑等全局布局。
ProLayout - : 页面的标准容器，自动生成面包屑和标题。
PageContainer - : 底部固定工具栏。
FooterToolbar - : 水印组件。
WaterMark
2. Table 表格与列表
2. Table 表格与列表
核心组件:
ProTable- ProTable (超级表格):
- 文档链接: https://pro-components.antdigital.dev/components/table
- 用途: 包含查询表单、工具栏、表格体的全功能表格，CRUD 标配。
- EditableProTable (可编辑表格):
- 文档链接: https://pro-components.antdigital.dev/components/editable-table
- 用途: 行内编辑、实时保存。
- DragSortTable (拖拽排序):
- ProList (高级列表):
- 文档链接: https://pro-components.antdigital.dev/components/list
- 用途: 卡片列表、文章列表，支持展开、选择。
核心组件:
ProTable- ProTable (超级表格):
- 文档链接: https://pro-components.antdigital.dev/components/table
- 用途: 包含查询表单、工具栏、表格体的全功能表格，CRUD 标配。
- EditableProTable (可编辑表格):
- 文档链接: https://pro-components.antdigital.dev/components/editable-table
- 用途: 行内编辑、实时保存。
- DragSortTable (拖拽排序):
- ProList (高级列表):
- 文档链接: https://pro-components.antdigital.dev/components/list
- 用途: 卡片列表、文章列表，支持展开、选择。
3. Form 表单组件
3. Form 表单组件
核心组件:
ProForm- 通用表单 (ProForm, ModalForm, DrawerForm, StepsForm):
- 文档链接: https://pro-components.antdigital.dev/components/form
- 用途:
- : 标准页面表单。
ProForm - : 弹窗表单。
ModalForm - : 抽屉表单。
DrawerForm - : 分步表单。
StepsForm - : 登录页专用。
LoginForm
- SchemaForm (JSON配置表单):
- QueryFilter (筛选表单):
核心组件:
ProForm- 通用表单 (ProForm, ModalForm, DrawerForm, StepsForm):
- 文档链接: https://pro-components.antdigital.dev/components/form
- 用途:
- : 标准页面表单。
ProForm - : 弹窗表单。
ModalForm - : 抽屉表单。
DrawerForm - : 分步表单。
StepsForm - : 登录页专用。
LoginForm
- SchemaForm (JSON配置表单):
- QueryFilter (筛选表单):
4. Data Display 数据展示
4. Data Display 数据展示
- ProCard (高级卡片):
- 文档链接: https://pro-components.antdigital.dev/components/card
- 用途: 页面切分、分栏布局、栅格布局。
- ProDescriptions (定义列表):
- 文档链接: https://pro-components.antdigital.dev/components/descriptions
- 用途: 详情页展示，支持 定义。
columns
- StatisticCard (指标卡):
- ProCard (高级卡片):
- 文档链接: https://pro-components.antdigital.dev/components/card
- 用途: 页面切分、分栏布局、栅格布局。
- ProDescriptions (定义列表):
- 文档链接: https://pro-components.antdigital.dev/components/descriptions
- 用途: 详情页展示，支持 定义。
columns
- StatisticCard (指标卡):
5. Other 其他
5. Other 其他组件
- ProSkeleton (骨架屏):
- ProField (原子组件):
- 文档链接: https://pro-components.antdigital.dev/components/field
- 用途: 根据 valueType 渲染只读/编辑模式的原子组件。
- ProSkeleton (骨架屏):
- ProField (原子组件):
- 文档链接: https://pro-components.antdigital.dev/components/field
- 用途: 根据 valueType 渲染只读/编辑模式的原子组件。
最佳实践提醒
最佳实践提醒
- Request 模式: ProTable 和 ProForm 推荐使用 属性配合
request函数来接管数据加载，而不是手动管理 loading 和 data state。详情请查阅 ProTable 文档中的async部分。request - ValueType: 善用 ('money', 'date', 'select' 等) 来自动格式化显示和表单项，减少手写 render 代码。
valueType
- Request 模式: ProTable 和 ProForm 推荐使用 属性配合
request函数来接管数据加载，而不是手动管理 loading 和 data state。详情请查阅 ProTable 文档中的async部分。request - ValueType: 善用 ('money', 'date', 'select' 等) 来自动格式化显示和表单项，减少手写 render 代码。
valueType