iter(g327): stepper 补失败态与整条回跳

This commit is contained in:
HIsheR
2026-10-27 01:56:10 +08:00
parent 8d154daa6a
commit 0a5665e296
8 changed files with 79 additions and 18 deletions
+6 -4
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T17:17:55.311Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T17:55:42.939Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -751,7 +751,8 @@ const tab = signal('a'); tabs({ tabs: [{ value: 'a', label: '概览', closable:
参数:
- steps(必填):StepperItem[] —— 步骤列表,每项 { label, description? }
- steps(必填):StepperItem[] —— 步骤列表,每项 { label, description?, status? }
- status:'error' —— 写在 steps 的每一项里:该项标为失败(红点 + 感叹号 + 读屏「第 N 步:xx(失败)」),优先级高于进度态,也不参与回跳
- active(必填):Signal<number> —— 当前步索引(0 基)信号,双向绑定:回跳写回、外部赋值同步
- clickable:boolean —— 已完成步骤是否可点击回跳;缺省 false
- direction(默认 'horizontal'):'horizontal' | 'vertical' —— 排列方向:horizontal 横排连接线在节点之间;vertical 竖排、连接线落在圆点下方,已走完的一段用主色
@@ -767,8 +768,9 @@ const step = signal(1); stepper({ steps: [{ label: '下单' }, { label: '支付'
1. 用 signal(0) 创建当前步索引,传入 active;索引之前的步骤显示 ✓ 已完成态
2. 流程推进时外部赋值即可:step(step() + 1),组件三态自动跟随
3. clickable: true 时已完成步骤可点击回跳并写回信号,配合 onChange 同步业务状态
4. 侧栏或移动端传 direction: 'vertical':圆点成一列、说明文字紧贴右侧,步与步之间由圆点下方的竖线相连(末步不画线,已完成的段用主色标进度)
3. clickable: true 时已完成步骤可点击回跳并写回信号,配合 onChange 同步业务状态;点圆点(键盘可 Tab)或标题文字都算,一次点击只回调一次
4. 某步失败时给该项加 status: 'error':圆点变红加感叹号、标题标红、读屏读「第 N 步:xx(失败)」;它既不进 done 也不占 current,因此不参与回跳——「失败」和「还没走到」只能是两种视觉
5. 侧栏或移动端传 direction: 'vertical':圆点成一列、说明文字紧贴右侧,步与步之间由圆点下方的竖线相连(末步不画线,已完成的段用主色标进度)
现场演示:apps/docs/demo.html#sec-stepper