iter: e02 新增 stepper 步骤条组件(三态流转 + active 信号双向绑定 + clickable 回跳)
This commit is contained in:
@@ -38,6 +38,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",
|
||||
@@ -978,6 +979,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",
|
||||
|
||||
Reference in New Issue
Block a user