iter(g273): 新增区域加载遮罩组件
This commit is contained in:
+28
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T14:56:09.624Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T14:58:51.630Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -2315,6 +2315,32 @@ const pad = signaturePad({ value: sign, height: 140 }); mount('#box', () => pad.
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-sign
|
||||
|
||||
### loading — 区域加载遮罩 Loading
|
||||
|
||||
参数:
|
||||
|
||||
- active:boolean | Signal<boolean> —— 是否加载中:布尔直接置位,传信号则随状态显隐
|
||||
- text:string —— 遮罩文案;缺省只显示转圈(读屏仍报「内容加载中」)
|
||||
- delay:number —— 出场延迟(ms);缺省 120,快请求不闪遮罩
|
||||
- spinnerSize:number —— 转圈直径(px);缺省 20
|
||||
- minHeight:number —— 最小高度(px);内容为空时兜住遮罩高度
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
loading({ active: busy, text: '正在刷新订单' }, dataTable({ ... }))
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 把要遮挡的那块内容作为 children 交进来,active 传布尔或信号:刷新时盖上遮罩,数据回来后自动收起
|
||||
2. 内容不隐藏、只降透明度——布局与尺寸原地保留,遮罩收起时不会跳一下
|
||||
3. 默认延迟 120ms 出场:接口快于这个时间就不闪遮罩;想立刻显示传 delay: 0
|
||||
4. 遮罩文案写明在等什么(「正在刷新订单」),读屏同一句也会播报;只要转圈就省略 text
|
||||
5. 内容可能为空时给 minHeight,否则高度塌成 0 遮罩无处可盖
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-loading
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant 三档视觉强度,disabled / loading 支持布尔或信号动态同步(loading 转圈并禁点),onClick 点击回调
|
||||
@@ -2400,6 +2426,7 @@ API 速览:
|
||||
- diffView(props):文本差异对比,行级 LCS 对齐 + 增删着色 + 双行号列,顶部带 +N / −N 统计
|
||||
- codeBlock(props):代码块,等宽多行 + 行号列 + 标题行 + 一键复制原文,只展示不高亮
|
||||
- signaturePad(props):手写签名板,指针绘制 + DPR 位图,返回 handle(el / clear / toDataURL / isEmpty)
|
||||
- loading(props, ...children):区域加载遮罩,内容原地降透明度 + 转圈文案,带延迟出场避免快请求闪烁
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user