timeline · 时间轴

一串按时间排的事件：一个时点、一句标题、可选一段正文。 公告列表、大事记、版本记录都是它 —— 它们的共同点不是“有日期”， 而是顺序本身就是信息。

一个完整的时间轴

1. 2026-10-29

   2026 年三季报披露

   营业总收入 1,294.06 亿元，同比 +12.40%；经营现金流净额本期未披露。

2. 2026-08-27

   2026 年半年报披露

   营业总收入 842.31 亿元，同比 +9.87%。

3. 2026-05-18

   2025 年度分红实施

   每 10 股派 12.80 元（含税），除权除息日 2026-05-19。

4. 2026-04-02

   2025 年年度报告披露

第一项带 timeline__item--latest：圆点从 8px 变成 12px、标题加重到 600。 两条都是非颜色线索 —— 强制色模式会把所有作者色替换掉， 只靠“最新那条是蓝的”在那里等于没标。
连接线是伪元素画的，最后一条由 :not(:last-child) 收掉 —— 不是给最后一条设透明边框。透明边框在强制色里会显形， 本库为此吃过一次亏（0.22.1 的侧栏“当前项”，五条全都长出了竖线）。

紧凑档：侧栏、卡片、弹层里的事记

timeline--compact 只做两件事：条目间距从 --sp-4 收到 --sp-2，时间挪回标题同一行。它不改字号 —— 在侧栏里把字缩小，等于承认这块内容不重要，而事实往往相反。

反例：拿字符画圆点

两栏的字形数差 1 —— 那 1 个就是圆点。这不是洁癖： 伪元素里的字符会参与可访问名计算（实测：侧栏被读屏念成 “圆点 总览”）。要画形状就用盒子，不要用字。

什么时候不该用它

• 状态要区分时（已披露 / 待披露 / 停牌）：用 badge 配文字。 本组件故意不给状态配色 —— 颜色在强制色、色盲、打印三种情况下会同时失效， 而状态文字不会。
• 要做进度条时：步骤条（steps）与时间轴不是一回事 —— 前者有“当前在第几步”的语义，本组件只表示“发生过”。
• 只有一条事件时：那是一个段落，不是时间轴。连接线和圆点在这里只会让人以为还有下文。

标记结构

<ol class="timeline">
  <li class="timeline__item
       timeline__item--latest">
    <time class="timeline__time"
          datetime="2026-10-29">
      2026-10-29
    </time>
    <h3 class="timeline__title">
      2026 年三季报披露
    </h3>
  </li>
</ol>

<ol> 不只是习惯：读屏会念“第 2 项，共 4 项”， 而 <div> 堆出来的时间轴在无障碍树里只是一串没有关系的段落。 <time datetime> 同理 —— 显示“10-29”时，机器仍拿到完整日期。