iter: e02 新增 stepper 步骤条组件(三态流转 + active 信号双向绑定 + clickable 回跳)

This commit is contained in:
HIsheR
2026-10-23 17:57:44 +08:00
parent 47bea0b69c
commit fc7a1e8299
13 changed files with 327 additions and 8 deletions
+25 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-23T09:49:54.480Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-23T09:57:15.241Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -628,6 +628,29 @@ const tab = signal('a'); tabs({ tabs: [{ value: 'a', label: '概览' }, { value:
现场演示:apps/docs/demo.html#sec-tabs-modal
### stepper — 步骤条 Stepper
参数:
- steps(必填):StepperItem[] —— 步骤列表,每项 { label, description? }
- active(必填):Signal<number> —— 当前步索引(0 基)信号,双向绑定:回跳写回、外部赋值同步
- clickable:boolean —— 已完成步骤是否可点击回跳;缺省 false
- onChange(回调):(index: number) => void —— 步骤切换回调(点击回跳触发)
示例:
```
const step = signal(1); stepper({ steps: [{ label: '下单' }, { label: '支付' }, { label: '完成' }], active: step, clickable: true })
```
手把手:
1. 用 signal(0) 创建当前步索引,传入 active;索引之前的步骤显示 ✓ 已完成态
2. 流程推进时外部赋值即可:step(step() + 1),组件三态自动跟随
3. clickable: true 时已完成步骤可点击回跳并写回信号,配合 onChange 同步业务状态
现场演示:apps/docs/demo.html#sec-stepper
### pagination — 分页器 Pagination
参数:
@@ -803,6 +826,7 @@ API 速览:
- spinner(props):加载指示器,size 控制直径
- progress(props):进度条,value 信号驱动 0-100(满格切 success 色);不传 value 退化为不确定态无限往复
- tabs(props):标签页,active 信号双向绑定,滑动指示条 + 方向键环形导航,支持禁用页签
- stepper(props):步骤条,done/current/upcoming 三态,active 信号双向绑定,clickable 时已完成步骤可回跳
- modal(props, ...children):弹窗,open 信号驱动显隐,Esc / 遮罩 / × 关闭,size 三档宽度,footer 提供底部操作区
- drawer(props, ...children):抽屉,open 信号驱动侧滑面板,placement 左右可配、width 可调、footer 操作区,遮罩 / × / Esc 关闭
- form(props, items):表单容器,布局 + 聚合校验,全部通过才触发 onSubmit