# ProComponents

> 🏆 让中后台开发更简单，包含 table form 等多个组件

## Others

- [Changelog](/changelog/index.md)
- [ProCard 高级卡片](/components/card.md): 页内容器卡片，提供标准卡片样式，卡片切分以及栅格布局能力。ProCard 创造性地将 Col, Row, Card, Tabs 等组件实现结合在一起，让你仅用一个组件就能够完成卡片相关的各种布局。 如果你还需要结合图表一起使用，可以参考 StatisticCard 指标卡组件，他是 ProCard 的进一步封装。若您也需要封装 ProCard，注意需要透出 isProCard=true 的静态属性让 ProCard 可以识别为同一个元素。
- [CheckCard 多选卡片](/components/check-card.md): 集合多种相关联说明信息，并且可被选择的卡片。特点： ① 可容纳多种相关联说明信息，如标题、描述、图片、标签等② 有明显边界③ 有明显选中态
- [ProFormDependency 数据联动](/components/dependency.md): Form 中的数据联动非常常见，所以我们封装了一个组件来进行数据处理。
- [ProDescriptions 定义列表](/components/descriptions.md)
- [DragSortTable 拖动排序表格](/components/drag-sort-table.md): DragSortTable排序采用的dnd-kit，需要提供rowKey来确定数据的唯一值，否则不能正常工作。
- [EditableProTable 可编辑表格](/components/editable-table.md): 可编辑表格 EditableProTable 与 ProTable 的功能基本相同，为了方便使用 EditableProTable 增加了一些预设，关掉了查询表单和操作栏，同时修改了 value 和 onChange 使其可以方便的继承到 antd 的 Form 中。
- [ProFormFields 表单项](/components/field-set.md): 一个表单除了 Form 之外还是需要一系列的表单项，ProForm 自带了数量可观的表单项，这些组件本质上是 Form.Item 和 组件的结合，我们可以把他们当成一个 FormItem 来使用，并且支持各种 props。每个表单项都支持 fieldProps 属性来支持设置输入组件的props。 我们支持了 placeholder 的透传，你可以直接在组件上设置 placeholder。 每个表单项同时也支持了 readonly ，不同的组件会有不同的只读样式，与 disable 相比 readonly 展示更加友好。生成的 dom 也更小，比如 ProFormDigit 会自动格式化小数位数。 ProFormText 是 FormItem + Input 的产物，可以类比于以下的代码： 所以我们给 ProFormText 设置的 props 其实是 Form.Item 的，fieldProps 才是包含的组件的，要切记。
- [ProField 原子组件](/components/field.md): 该组件为内部组件，请勿直接使用。 原子信息组件，统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。
- [ProForm 高级表单](/components/form.md): ProForm 在原来的 Form 的基础上增加了一些语法糖和更多的布局设置，帮助我们快速地开发一个表单，同时添加了一些默认行为，让我们的表单默认好用。 分步表单、Modal 表单、Drawer 表单、查询表单、轻量筛选等多种 layout 可以覆盖大部分的使用场景，让我们脱离复杂而且繁琐的表单布局工作，用更少的代码完成更多的功能。 如果想要设置默认值，请使用 initialValues，任何直接使用组件 value 和 onChange 的方式都有可能导致值绑定失效如果想要表单联动或者做一些依赖，可以使用 render props 模式，ProFormDependency 绝对是最好的选择ProForm 的 onFinish 与 antd 的 Form 不同，支持 Promise，如果你正常返回会自动为你设置按钮的加载效果如果想要监听某个值，建议使用 onValuesChange。保持单向的数据流无论对开发者还是维护者都大有裨益ProForm 没有「魔法」：ProForm 只是对 antd Form 的薄封装；自定义控件用 Form.Item 包裹后与 Pro 表单项混用即可。
- [ProFormList 数据结构化](/components/group.md): 我们还提供了用来进行结构化数据的录入: ProFormList 录入结构化的多维数组数据。ProFormFieldSet 录入结构化的一维数组数据。ProFormDependency 数据依赖的相关组件
- [组件总览](/components/index.md): ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著地提升制作 CRUD 页面的效率，更加专注于页面。 ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能ProTable 表格模板组件，抽象网络请求和表格格式化ProForm 表单模板组件，预设常见布局和行为ProCard 提供卡片切分以及栅格布局能力ProDescriptions 定义列表模板组件，ProTable 的配套组件ProSkeleton 页面级别的骨架屏
- [Demos](/components/layout/api.md)
- [ProLayout 高级布局](/components/layout/index.md): ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态、自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑、页面标题，并且提供低成本方案接入页脚工具栏。
- [ProList 高级列表](/components/list.md): ProList 基于 ProTable 实现，可以认为是 ProTable 的一个特例，将数据以列表的形式展现。API 设计上更像 Table，使得 Table 和 List 的切换变得更加容易。
- [LoginForm/Page 登录表单](/components/login-form.md): LoginForm 和 LoginFormPage 是 ProForm 的变体，两者是为了适应常见的登录表单布局来专门实现，适用于各类登录场景，降低布局的压力。
- [Modal/Drawer 浮层表单](/components/modal-form.md): ModalForm 和 DrawerForm 是 ProForm 的一个变体，本质上仍然是个表单。所以无法通过 footer 来自定义页脚，如果要定义页脚需要使用 submitter.render 来进行自定义。这两个表单的表现与 ProForm 相同，可以从 ProForm 直接修改而来。 ModalForm 和 DrawerForm 都提供了 trigger 来减少 state 的使用，如果你需要使用 state 来控制可以使用 open 和 onOpenChange 来控制打开与关闭。
- [PageContainer 页容器](/components/page-container.md): PageContainer 是一个页面容器组件，提供了统一的页面布局结构。它包含了页面标题、面包屑导航、页面操作区等标准化的页面元素，让您可以快速构建具有一致性的页面布局。 自动处理页面标题和面包屑导航支持页面级别的操作按钮和工具栏提供标准化的页面布局结构支持水印、加载状态等高级功能
- [PageHeader 页头](/components/page-header.md)
- [Query/LightFilter 筛选表单](/components/query-filter.md): 有些时候表单要与别的组件组合使用，常见的有 Table ，List 等，这时候就需要一些特殊形态的表单。QueryFilter 和 LightFilter 解决了配合组件使用的问题，避免了复杂的样式设置。ProTable 中默认 支持了 QueryFilter 和 LightFilter 作为自己的筛选表单。
- [Schema Form JSON 表单](/components/schema-form.md): SchemaForm 是根据 JSON Schema 来生成表单的工具。SchemaForm 会根据 valueType 来映射成不同的表单项。 Tips： 如您遇到卡顿问题或有更高的性能要求可参考示例使用
- [ProSkeleton 骨架屏](/components/skeleton.md): 该组件为内部组件，请勿直接使用。 页面级别的骨架屏，不支持自定义
- [StatisticCard 指标卡](/components/statistic-card.md): 指标卡结合统计数值用于展示某主题的核心指标，结合 Ant Design Charts 图表库丰富数值内容，满足大多数数值展示的场景。 注意 demo 中的所有图表示例可以到 charts 的官网中找到，这里不再给出实际代码示例，仅以图片进行代替，所以相关交互是没有的。 若有内容撑开卡片的情况请设置内容宽度为 100% 或设置定宽。
- [StepsForm 分步表单](/components/steps-form.md): StepsForm 通过 Provider 来管理子表单的数据，每个子表单都是完整的数据，在 StepsForm 组合成最后的数据。同时自带了一个进度条和管理进度条的相关 API. StepsForm 继承了 Form.Provider ，相关文档可以看这里，转化 moment 的值是 ProForm 提供的功能，所以 onFormFinish 和 onFormChange 其中的值都是未经转化的。 拆分为多个组件时，每个 StepForm 有独立的 Form 实例，不应在 StepsForm 外直接用单一 useWatch 跨步监听。请通过 stepsFormRef.current?.getAllFieldsValue() 合并取值，并在 onFormChange 中将需要响应的值提升到父组件状态，再传给其他步骤做字段显隐或请求参数。
- [Demos](/components/table/api.md)
- [ProTable 高级表格](/components/table/index.md): ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。 依托于 ProForm 的能力，ProTable 的查询区可切换多种形态（如 QueryFilter / LightFilter），也可在 type="form" 等场景下更像普通表单使用。
- [ProComponents API 变更总结 (2.0 → 3.0)](/docs/api-changes.md)
- [文档编写指南](/docs/index.md): ProConfigProvider：主题、国际化与自定义 valueType
- [介绍](/docs/intro.md)
- [ProComponents 2.0 到 3.0 迁移指南](/docs/migration-guide.md)
- [ProConfigProvider](/docs/pro-config-provider.md): ProConfigProvider 为其子树中的 ProComponents 提供统一配置。常见用途包括覆盖主题 Token、切换深色主题、注册自定义 valueType 和配置国际化。 应用仍应使用 antd 的 ConfigProvider 配置 antd 组件。ProConfigProvider 会读取外层 antd 配置，并把相关主题和语言信息传给 ProComponents。
- [CRUD](/playground/index.md): 通过 EditableProTable 的 recordCreatorProps、editable 和操作列，完成本地任务的新建、编辑与删除。
- [ProDescriptions](/playground/pro-descriptions.md)
- [ProForm](/playground/pro-form.md)
- [ProLayout](/playground/pro-layout.md)
- [ProTable](/playground/pro-table.md)