--- title: "Timeline" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Timeline for chronological events, milestones, and process steps. Vertical and horizontal layouts with icons and connectors for history UIs." url: https://frutjam.com/zh-hant/components/timeline --- # Timeline Component 時間軸組件依時間順序顯示一系列事件、里程碑或敘述進度。時間表採用語義 HTML 構建，可協助使用者了解歷史進展和專案階段。 Frutjam 時間軸系統支援多種方向、顏色和專案樣式，非常適合專案歷史記錄、發行說明和旅程地圖。 僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。 | 班級 | 類型 | 描述 | | ------------- | --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | timeline | 根據 | 按時間順序排列的事件列表 | | timeline-item | 修飾符 | 單獨的事件行 — 放置在每個 ` 上 基本用法 帶顏色的時間軸
在每個時間軸項目上新增顏色修飾符，以為其點和從其尾隨的連接線著色。 ```html ``` 交替雙方
在每個專案上的 timeline-start 和 timeline-end 之間交替內容以建立鋸齒形佈局。 ```html ``` 雙色調連接器
每個項目的連接線都會繼承其顏色，從而在不同顏色的步驟之間創建無縫過渡。 ```html ``` 僅起始端
僅將內容放置在 timeline-start 中，並使用空的 timeline-end 將所有內容推到軸的左側。 ```html ``` 僅端面
使用 timeline-snap-start 將點推到左邊緣，所有內容都在右側。 ```html ``` 卡片內容豐富
將內容包裹在 border rounded-box p-3 區塊中，為每個時間軸事件提供類似卡片的外觀。 ```html ``` 快速啟動
在清單上使用 timeline-snap-start 隱藏開始列並將點與左邊緣對齊。 ```html ``` 按扣結束
在清單上使用 timeline-snap-end 隱藏結束列並將點與右邊緣對齊。 ```html ``` ` |