时间线与执行记录
Timeline / Activity
按时间保留已经发生的事件和结果。
- 需求已记录09:00
- 资料已核对09:30
- 图鉴已整理10:00
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'timeline'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
用户需要回看任务轨迹、变更或处理记录。
什么时候不用
预先安排的步骤更适合计划，而非伪装成已发生事件。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
items | [{"label":"需求已记录","time":"09:00"},{"label":"资料已核对","time":"09:30"},{"label":"图鉴已整理","time":"10:00"}] |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 明确时间与事件的关联。
- 不要只依赖线条和颜色表达先后。
和相似组件的区别
时间线描述发生过什么；进度条描述当前到了哪里。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js · 来源核验