计划与步骤
Plan / Stepper
把已知步骤和当前进展放在一起，帮助用户建立预期。
- 整理需求已完成
- 核对官方实现进行中
- 呈现组件图鉴未开始
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'plan'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
执行开始前已经知道大部分步骤。
什么时候不用
步骤随着探索才出现时，应展示执行记录而非假装已有完整计划。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
items | [{"label":"整理需求","state":"已完成"},{"label":"核对官方实现","state":"进行中"},{"label":"呈现组件图鉴","state":"未开始"}] |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 每一步有文字状态。
- 完成数量必须来自真实步骤。
和相似组件的区别
Plan 描述预先确定的路径；Task 记录执行中才产生的步骤。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验