台灣正體

時間軸

敘述同個主題所發生的關聯事件。
初入上手
開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities
格局設計
箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap
表單
按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch
文字與段落
分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text
視覺回饋
圓形量測計 Gauge 讀取狀態 Loading 快顯視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar
多媒體與圖示
大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset
資料顯示
可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table 時間軸 Timeline
導覽
導覽標記 Breadcrumb 彈出式選單 Dropdown 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab
應用程式
邊緣抽屜 App Drawer 格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar 頂部列 App Topbar
JavaScript 模組
選單模組 Module Dropdown 工具提示 Module Tooltip 分頁模組 Module Tab 樣式切換 Module Toggle
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
夏野姫依已經被指派到這份工作。
這個工作被納入下個更新的里程碑。
冬島緣糸提及了這個工作。
<div class="ts-timeline">
    <div class="item is-active">
        <div class="indicator">
            <span class="ts-icon is-user-icon"></span>
        </div>
        <div class="content">夏野姫依已經被指派到這份工作。</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-signs-post-icon"></span>
        </div>
        <div class="content">這個工作被納入下個更新的里程碑。</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-quote-left-icon"></span>
        </div>
        <div class="content">冬島緣糸提及了這個工作。</div>
    </div>
</div>
概要

時間軸本身沒有進度指示,通常用來陳列已經發生過的事情。若你希望預先提示未來可能發生的事情或步驟,可以使用步驟指示器

這個元件沒有順序,你可以依照自己喜好把最新發生的事情放置在最上或下面。

內容
圖示

每個事件都必須帶有象徵圖示。

早上 07:01
早上吃了土司。
下午 02:46
喝了一杯水。
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-bread-slice-icon"></span>
        </div>
        <div class="content">
            <div class="ts-text is-description">早上 07:01</div>
            早上吃了土司。
        </div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-glass-water-icon"></span>
        </div>
        <div class="content">
            <div class="ts-text is-description">下午 02:46</div>
            喝了一杯水。
        </div>
    </div>
</div>
輔助內容

事件的對側可以擺放額外的敘述文字或圖片。

12月25日
07:16
「客廳的門」被打開。
12月25日
11:23
「客廳的門」已經關上。
<div class="ts-timeline">
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">1225日<br>07:16</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-door-open-icon"></span>
        </div>
        <div class="content">「客廳的門」被打開。</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">1225日<br>11:23</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-door-closed-icon"></span>
        </div>
        <div class="content">「客廳的門」已經關上。</div>
    </div>
</div>
次要事件

如果有些事情太過冗長或不重要,可以將其以更小的方式呈現。

春町葉白回報了這個錯誤。
確認已修正這個錯誤。
還原上個推送的修正,修改錯字。
錯誤已經被解決。
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-bug-icon"></span>
        </div>
        <div class="content">春町葉白回報了這個錯誤。</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">確認已修正這個錯誤。</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">還原上個推送的修正,修改錯字。</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">錯誤已經被解決。</div>
    </div>
</div>
休止符號

表示某件事情發生之後有歇止一小段時間或不連貫。

正在修復這個不可預期的錯誤。
這個問題被暫緩。
安全系統正在監視是否發生相同問題。
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-screwdriver-wrench-icon"></span>
        </div>
        <div class="content">正在修復這個不可預期的錯誤。</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-pause-icon"></span>
        </div>
        <div class="content">這個問題被暫緩。</div>
    </div>
    <div class="item is-break"></div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-eye-icon"></span>
        </div>
        <div class="content">安全系統正在監視是否發生相同問題。</div>
    </div>
</div>
狀態
啟用的

標明目前正處於的事件狀態。

02月13日
買家取件成功。
02月13日
包裹已配達買家取件門市(夏洛夏分店)。
02月12日
包裹已從深圳物流中心出貨。
<div class="ts-timeline">
    <div class="item is-active">
        <div class="aside">
            <div class="ts-text is-description">0213日</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">買家取件成功。</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">0213日</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-store-icon"></span>
        </div>
        <div class="content">包裹已配達買家取件門市(夏洛夏分店)。</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">0212日</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-truck-icon"></span>
        </div>
        <div class="content">包裹已從深圳物流中心出貨。</div>
    </div>
</div>
停用的

淡化某個事件表示已經撤銷或不重要。

已申請退款,原先的款項已經退回至原信用卡。
透過 VISA 信用卡消費 320 元(後四碼 8277)。
訂單已經成立。
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-rotate-left-icon"></span>
        </div>
        <div class="content">已申請退款,原先的款項已經退回至原信用卡。</div>
    </div>
    <div class="item is-disabled">
        <div class="indicator">
            <span class="ts-icon is-credit-card-icon"></span>
        </div>
        <div class="content">透過 VISA 信用卡消費 320 元(後四碼 8277)。</div>
    </div>
    <div class="item is-disabled">
        <div class="indicator">
            <span class="ts-icon is-receipt-icon"></span>
        </div>
        <div class="content">訂單已經成立。</div>
    </div>
</div>
外觀
緊緻的

縮小事件之間的間距,令整個排序變得更加緊湊。

玩家已經登入。
玩家拾取了經驗皇冠。
玩家打敗了魔法飛龍。
<div class="ts-timeline is-compact">
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-person-icon"></span>
        </div>
        <div class="content">玩家已經登入。</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-crown-icon"></span>
        </div>
        <div class="content">玩家拾取了經驗皇冠。</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-dragon-icon"></span>
        </div>
        <div class="content">玩家打敗了魔法飛龍。</div>
    </div>
</div>
負面的

表示某個環節出錯了。

下載最新的系統映像檔案。
複製檔案至目標系統。
建置 Linux 版本失敗。
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-cloud-arrow-down-icon"></span>
        </div>
        <div class="content">下載最新的系統映像檔案。</div>
    </div>
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-copy-icon"></span>
        </div>
        <div class="content">複製檔案至目標系統。</div>
    </div>
    <div class="item is-negative">
        <div class="indicator">
            <span class="ts-icon is-xmark-icon"></span>
        </div>
        <div class="content">建置 Linux 版本失敗。</div>
    </div>
</div>
組合應用
變更歷史

透過大頭貼模擬 GitHub 或是一些 Git 網站對於檔案變更歷史的呈現。

新的程式碼分支已經建立。
不重要預置圖片,僅作為範例用
修正使用者無法登入的問題。
2 天前
不重要預置圖片,僅作為範例用
還原上個變更。
3 天前
<div class="ts-timeline">
    <div class="item">
        <div class="indicator">
            <span class="ts-icon is-code-fork-icon"></span>
        </div>
        <div class="content">新的程式碼分支已經建立。</div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">
            <div class="ts-row is-middle-aligned is-compact">
                <div class="column">
                    <span class="ts-avatar is-circular">
                        <img src="user.png">
                    </span>
                </div>
                <div class="column is-fluid">
                    修正使用者無法登入的問題。
                </div>
                <div class="column">2 天前</div>
            </div>
        </div>
    </div>
    <div class="item is-secondary">
        <div class="indicator">
            <span class="ts-icon is-code-commit-icon"></span>
        </div>
        <div class="content">
            <div class="ts-row is-middle-aligned is-compact">
                <div class="column">
                    <span class="ts-avatar is-circular">
                        <img src="user.png">
                    </span>
                </div>
                <div class="column is-fluid">
                    還原上個變更。
                </div>
                <div class="column">3 天前</div>
            </div>
        </div>
    </div>
</div>
測試紀錄

內容裡面可以擺放其他元件來呈現詳細的事件內容,這個範例模擬了一個測試系統的細節報錯。

63 秒
執行主要測試
系統環境正常。
沒有通過安全測試。
資料庫帳號不能為空。
18 秒
檢查授權金鑰
1 分 32 秒
初始化測試環境
<div class="ts-timeline">
    <div class="item is-negative">
        <div class="aside">
            <div class="ts-text is-description">63 秒</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-xmark-icon"></span>
        </div>
        <div class="content">
            執行主要測試
            <div class="ts-space"></div>
            <div class="ts-content is-rounded is-secondary">
                <div class="ts-checklist">
                    <div class="item is-positive">
                        系統環境正常。
                    </div>
                    <div class="item is-negative">
                        沒有通過安全測試。
                    </div>
                    <div class="item is-negative">
                        資料庫帳號不能為空。
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">18 秒</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">檢查授權金鑰</div>
    </div>
    <div class="item">
        <div class="aside">
            <div class="ts-text is-description">132 秒</div>
        </div>
        <div class="indicator">
            <span class="ts-icon is-check-icon"></span>
        </div>
        <div class="content">初始化測試環境</div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標