iter(g135): 表单支持多列布局

This commit is contained in:
HIsheR
2026-10-26 15:27:18 +08:00
parent 7b41630b96
commit 21950d9ddd
7 changed files with 35 additions and 7 deletions
+3 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T07:24:00.739Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T07:26:53.819Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -922,6 +922,7 @@ const open = signal(false); drawer({ title: '详情', open, width: 360, onClose:
参数:
- layout(默认 vertical):'vertical' | 'horizontal' —— 布局方向;缺省 vertical(horizontal 为标签左置)
- columns(默认 1):1 | 2 | 3 —— 字段列数:>1 时字段走栅格铺列(沿用 grid 的窄屏单列),按钮区始终整行;缺省 1
- submitText:string —— 提交按钮文案;缺省「提交」
- resetText:string —— 重置按钮文案;缺省不渲染
- onSubmit(回调):() => void —— 全部字段校验通过后的提交回调
@@ -955,6 +956,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label:
10. rules.validator 返回 Promise 即为异步规则(如「邀请码是否已被使用」远程校验):提交时逐项 await,校验期间提交按钮禁用,结论按轮次取舍避免乱序覆盖
11. formItem 返回 { el, validate, validateAsync } 句柄:validate 只跑同步规则(供 blur/input 即时反馈),validateAsync 逐条 await 供 form 聚合提交
12. 需要给字段加格式说明就传 hint:平时显示在控件下方,校验失败时自动让位给错误文案,同一位置不堆两行
13. 字段多的编辑页传 columns: 2 或 3 走多列栅格:列间距与窄屏堆叠沿用 grid,按钮区始终整行;单列表单不要传(默认 1)
现场演示:apps/docs/demo.html#sec-formlab