Timeline (am-timeline)

am-timeline 使用原生 <ol> 與 <time> 呈現有順序的事件序列，支援 vertical 與 horizontal 方向。窄螢幕上的 horizontal layout 會自動折疊為垂直排列，維持內容可讀性。

使用

<Timeline
  title="Project timeline"
  description="Key milestones from kickoff to launch."
  items={[
    {
      date: "12 Feb 2026",
      dateTime: "2026-02-12",
      title: "Kickoff",
      description: "Align the team on scope and delivery milestones.",
      status: "complete",
    },
    {
      date: "18 Feb 2026",
      dateTime: "2026-02-18",
      title: "First milestone",
      description: "Review the first usable slice with stakeholders.",
      status: "current",
    },
    {
      date: "28 Feb 2026",
      dateTime: "2026-02-28",
      title: "Launch",
      description: "Release the approved experience to its channel.",
      status: "upcoming",
    },
  ]}
/>

事件順序、日期、目前狀態與 optional link 都由 consumer 提供；元件不負責 roadmap 計算、資料查詢或 workflow transition。