時間軸 | Quasar Framework

為何捐款

API 瀏覽器

如何貢獻

選項與輔助工具

風格與識別

版面配置與格線

Vue 組件

按鈕

表單組件

觀察器

Vue 指令

Quasar 插件

Vue 組合式函式

安全性

Quasar CLI (搭配 Vite)

Quasar CLI (搭配 Webpack)

Icon Genie CLI

應用程式擴充套件

Quasar 工具

時間軸

QTimeline 元件以時間順序顯示一系列事件。它通常是一種圖形設計，顯示一個長條，旁邊標有日期，通常還有事件。時間軸可以使用任何時間尺度，具體取決於主題和資料。

QTimeline 具有 3 種佈局

dense (預設) 在時間軸的時間軸指定側（預設在右側）顯示標題、標題、副標題和內容
comfortable 在時間軸的時間軸指定側（預設在右側）顯示標題、標題和內容，副標題則在另一側
loose 在中心顯示標題，標題和內容在時間軸的條目指定側（預設在右側），副標題則在另一側

用法

基本

僅使用 Props

以下是相同的範例，但僅使用 QTimelineEntry 屬性而不是預設插槽

僅使用插槽

以下再次是相同的範例，但僅使用 QTimelineEntry 插槽

深色設計

佈局和側面選擇

警告

僅當 QTimeline 具有 loose 佈局時，QTimelineEntry 才會考慮其 side prop。

響應式

提示

以下範例使用 $q.screen 偵測視窗大小的變化，以查看所有 3 種佈局的實際效果。

發現錯誤？在瀏覽器中編輯此頁面

1. 介紹

2. QTimeline API

3. QTimelineEntry API

4. 用法

4.1. 基本

4.2. 僅使用 Props

4.3. 僅使用插槽

4.4. 深色設計

4.5. 佈局和側面選擇

4.6. 響應式