Timeline 时间线
按时间顺序展示事件、状态变化或流程节点及其补充说明。
使用概览
适合使用
- 需要理解事件先后、处理进展或审计历史时。
不建议使用
- 项目没有时间关系，或需要进行字段级横向比较时。
真实示例
订单进度时间线
按照发生顺序呈现订单的两个处理节点。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/timeline.json基础用法
导入
import { Timeline } from "@richardqiu/quartz/timeline";JSX
<Timeline aria-label="订单进度" items={[{ id: "paid", title: "付款完成", timestamp: "09:30", tone: "success" }, { id: "packed", title: "等待打包", timestamp: "10:15" }]} />状态与控制摘要
默认
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | readonly TimelineItem[] | 必填 | 提供带稳定标识、标题和可选时间的事件列表。 |
组合结构
- 01
Timeline
键盘约定
- Timeline 不为静态事件内容增加合成键盘行为。
可访问性契约
- 由使用方为有序列表命名，每个事件都是列表项。
- 时间戳与事件标题、说明保持相邻。