#时间线

Timeline 按顺序组织持久操作、部署与 Agent 语义事件，不限定应用如何管理状态。

npm install @a3s-lab/ui@0.4.0

<ol class="timeline" aria-label="执行历史">
  <li data-state="success">
    <article class="item" data-variant="outline">…</article>
  </li>
  <li data-state="active" aria-current="step">
    <article class="item" data-variant="outline">…</article>
  </li>
</ol>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

导入完整样式包，或把 Timeline 与每个条目所用的组件组合导入。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

<ol class="timeline" aria-label="执行历史">
  <li data-state="success">
    <article class="item" data-variant="outline">…</article>
  </li>
  <li data-state="active" aria-current="step">
    <article class="item" data-variant="outline">…</article>
  </li>
</ol>

#参数

#状态与变体

由宿主应用把领域状态映射到四种语义状态，不要把每个后端状态都变成样式 API。中性或未来事件省略 data-state；同时使用文本或 Badge，不能只靠颜色表达状态。

#可访问性

顺序有意义时使用 <ol>，时间戳使用 <time datetime="…">。当前状态通过 aria-current="step" 明确表达。Timeline 仅提供 CSS；焦点、选择与实时播报仍由宿主应用负责。