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