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
+38 -1
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-23T09:49:54.480Z",
"generatedAt": "2026-10-23T09:57:15.241Z",
"repoRoot": ".",
"packages": [
{
@@ -167,6 +167,7 @@
"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",
@@ -1107,6 +1108,42 @@
"键盘可访问:Tab 聚焦激活页签,←→ 在启用页签间环形移动"
]
},
{
"id": "stepper",
"title": "步骤条 Stepper",
"demo": "sec-stepper",
"props": [
{
"n": "steps",
"t": "StepperItem[]",
"r": 1,
"d": "步骤列表,每项 { label, description? }"
},
{
"n": "active",
"t": "Signal<number>",
"r": 1,
"d": "当前步索引(0 基)信号,双向绑定:回跳写回、外部赋值同步"
},
{
"n": "clickable",
"t": "boolean",
"d": "已完成步骤是否可点击回跳;缺省 false"
},
{
"n": "onChange",
"t": "(index: number) => void",
"k": 1,
"d": "步骤切换回调(点击回跳触发)"
}
],
"example": "const step = signal(1); stepper({ steps: [{ label: '下单' }, { label: '支付' }, { label: '完成' }], active: step, clickable: true })",
"steps": [
"用 signal(0) 创建当前步索引,传入 active;索引之前的步骤显示 ✓ 已完成态",
"流程推进时外部赋值即可:step(step() + 1),组件三态自动跟随",
"clickable: true 时已完成步骤可点击回跳并写回信号,配合 onChange 同步业务状态"
]
},
{
"id": "pagination",
"title": "分页器 Pagination",