ProForm

pro-form

内联表单编排 · useForm + 自动 footer(提交/重置) + async onFinish loading + 自定义 footer(ModalForm 的内联姊妹件·文案接 i18n)

用法

基础用法

内联表单：自带提交 / 重置 footer，提交走 onFinish。

tsx

<ProForm onFinish={(values) => api.save(values)}>
  <Field label="姓名">
    <Input placeholder="必填" />
  </Field>
  <Field label="邮箱">
    <Input placeholder="含 @" />
  </Field>
</ProForm>

响应式栅格

columns=2 按容器宽度自适应（容器查询，非视口断点）；单字段跨整行用 Field colSpan=full。

tsx

<ProForm columns={2} submitText="保存">
  <Field label="名"><Input /></Field>
  <Field label="姓"><Input /></Field>
  <Field label="详细地址" colSpan="full"><Input /></Field>
</ProForm>

底部右对齐

footerAlign=right 让操作区贴右；隐藏重置用 showReset={false}。

tsx

<ProForm footerAlign="right" showReset={false} submitText="提交">
  <Field label="备注">
    <Input />
  </Field>
</ProForm>

何时用

页面内常驻一个表单、要自带提交/重置 footer 和响应式栅格时用（详情页编辑、设置页）。它是 ModalForm / DrawerForm 的内联姊妹件——同样 useForm + 自动 footer，只是不弹层。要弹窗/抽屉提交用 ModalForm/DrawerForm；只要裸容器、自己管 footer 用 Form；查询条件用 SearchForm。

导入

import { ProForm } from "@hulianui/ui"

Props

名称	类型	默认	说明
form	`FormInstance`	—	useForm 实例：提供则提交前自动 `validate()`，重置走 `form.resetFields()`
submitText	`string`	`locale.proForm.submit`	提交按钮文案
resetText	`string`	`locale.proForm.reset`	重置按钮文案
showReset	`boolean`	`true`	是否显示重置按钮（需 form 才有意义）
columns	`1 \| 2 \| 3`	`1`	字段栅格列数；≥2 时按容器宽度自适应（窄塌单列），跨整行用 `<Field colSpan="full">`
footerAlign	`"left" \| "right"`	`"left"`	底部操作区对齐
className	`string`	—	容器类名

Events

事件	类型	说明
onFinish	`(values: FormValues) => void \| boolean \| Promise<void \| boolean>`	提交回调；返回 Promise → 提交按钮 loading；reject 不抛断（错误反馈交消费者）

Slots

插槽	类型	说明
footer	`ReactNode`	自定义底部操作区（覆盖默认提交/重置按钮）
children	`ReactNode`	表单字段

禁忌 / 坑

columns 是容器查询自适应（按表单容器实际宽度塌列），不是视口断点；别再手搓 grid + media query，跨整行字段用 <Field colSpan="full">。
与 ModalForm 不同，ProForm 的 onFinish reject 不抛断——错误反馈（toast 等）由消费者自己处理。
重置按钮只有传了 form 才有意义（走 form.resetFields()）；用 footer 自定义底部会覆盖默认提交/重置按钮，此时需自己接提交逻辑。

用法

基础用法

内联表单：自带提交 / 重置 footer，提交走 onFinish。

tsx

<ProForm onFinish={(values) => api.save(values)}>
  <Field label="姓名">
    <Input placeholder="必填" />
  </Field>
  <Field label="邮箱">
    <Input placeholder="含 @" />
  </Field>
</ProForm>

响应式栅格

columns=2 按容器宽度自适应（容器查询，非视口断点）；单字段跨整行用 Field colSpan=full。

tsx

<ProForm columns={2} submitText="保存">
  <Field label="名"><Input /></Field>
  <Field label="姓"><Input /></Field>
  <Field label="详细地址" colSpan="full"><Input /></Field>
</ProForm>

底部右对齐

footerAlign=right 让操作区贴右；隐藏重置用 showReset={false}。

tsx

<ProForm footerAlign="right" showReset={false} submitText="提交">
  <Field label="备注">
    <Input />
  </Field>
</ProForm>

何时用

Props

名称	类型	默认	说明
form	`FormInstance`	—	useForm 实例：提供则提交前自动 `validate()`，重置走 `form.resetFields()`
submitText	`string`	`locale.proForm.submit`	提交按钮文案
resetText	`string`	`locale.proForm.reset`	重置按钮文案
showReset	`boolean`	`true`	是否显示重置按钮（需 form 才有意义）
columns	`1 \| 2 \| 3`	`1`	字段栅格列数；≥2 时按容器宽度自适应（窄塌单列），跨整行用 `<Field colSpan="full">`
footerAlign	`"left" \| "right"`	`"left"`	底部操作区对齐
className	`string`	—	容器类名

事件

类型

说明

onFinish

(values: FormValues) => void | boolean | Promise<void | boolean>

提交回调；返回 Promise → 提交按钮 loading；reject 不抛断（错误反馈交消费者）

插槽

类型

说明

footer

ReactNode

自定义底部操作区（覆盖默认提交/重置按钮）

children

ReactNode

表单字段

禁忌 / 坑

columns 是容器查询自适应（按表单容器实际宽度塌列），不是视口断点；别再手搓 grid + media query，跨整行字段用 <Field colSpan="full">。

与 ModalForm 不同，ProForm 的 onFinish reject 不抛断——错误反馈（toast 等）由消费者自己处理。

重置按钮只有传了 form 才有意义（走 form.resetFields()）；用 footer 自定义底部会覆盖默认提交/重置按钮，此时需自己接提交逻辑。

ProForm

用法

基础用法

响应式栅格

底部右对齐

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

ProForm

用法

基础用法

响应式栅格

底部右对齐

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关