iter(g327): stepper 补失败态与整条回跳
This commit is contained in:
+6
-4
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user