iter(g85): 进度条补可访问名与语义色
This commit is contained in:
+8
-9
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T05:00:45.858Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T05:03:25.043Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -644,8 +644,10 @@ spinner(); spinner({ size: 26 })
|
||||
|
||||
参数:
|
||||
|
||||
- value:Signal<number> —— 当前进度 0-100 信号,变化自动平滑过渡(越界钳制)
|
||||
- showText(默认 true):boolean —— 是否显示百分比文字;缺省 true
|
||||
- value:Signal<number> —— 当前进度 0-100 的信号;不传即不确定态(未知时长的加载)
|
||||
- showText:boolean —— 是否右侧显示百分比;缺省 true(不确定态忽略)
|
||||
- label:string —— 可访问名,如「上传进度」;缺省不确定态念「进行中」
|
||||
- variant:'default' | 'success' | 'warning' | 'danger' —— 填充语义色;缺省 default(满格自动切 success)
|
||||
|
||||
示例:
|
||||
|
||||
@@ -655,12 +657,9 @@ const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() +
|
||||
|
||||
手把手:
|
||||
|
||||
1. 时长未知的加载直接 progress() 不传 value:填充块匀速往复,不显示百分比,读屏读作进行中
|
||||
2. 创建数值信号 pct = signal(0),范围 0-100(越界自动钳制)
|
||||
3. 传入 value,填充宽度与百分比文字随信号平滑过渡
|
||||
4. 进行中填充带流动条纹,到 100% 自动变 success 色并停止条纹
|
||||
5. 不需要百分比文字时传 showText: false
|
||||
6. 定量进度用 value 信号:满格自动切 success 色并停止条纹,role=progressbar + aria-valuenow 同步
|
||||
1. 传 value 信号给定量进度,不传则退化为往复的不确定态
|
||||
2. label 写清这是什么进度,读屏会把名称与百分比一起念出来
|
||||
3. 失败或告警用 variant: 'danger' / 'warning',该颜色在满格时也不被 success 覆盖
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-feedback
|
||||
|
||||
|
||||
Reference in New Issue
Block a user