Tocas UI 開始使用元件樣式實際範例

GitHub

Tocas UI

統計數據

顯示分析數值與統計數字。

從此開始

開始使用主題色系響應式設計輔助樣式

格局設計

Container 界限容器 Control 表單控制項 Grid 網格系統 Wrap 間隔容器

表單

Button 按鈕 Checkbox 核取方塊 Fieldset 欄位分組 File 檔案上傳 Input 輸入欄位 Radio 單選方塊 Select 下拉式選擇 Selection 項目切換 Switch 指撥開關

內容與段落

Box 箱型容器 Content 內容區塊 Divider 分隔線 Header 標題 Quote 引言 Text 文字

視覺回饋

Blankslate 空白看板 Gauge 圓形量測計 Loading 讀取狀態 Mask 內容遮罩 Notice 常駐訊息 Procedure 步驟指示器 Progress 進度條 Snackbar 簡短通知

互動元素

Accordion 可折疊內容 Dropdown 彈出式選單 Modal 快顯視窗 Popover 彈出內容 Tooltip 工具提示

多媒體與圖示

Flag 國家旗幟 Icon 圖示 Iconset 圖示項目 Image 多媒體圖片 Imageset 圖片組合

資料顯示

Badge 計數徽章 Checklist 檢查清單 Chip 關聯標籤 Close 關閉按鈕 Conversation 交談會話 List 清單 Meta 中繼資料 Rating 評分 Statistic 統計數據 Table 表格 Timeline 時間軸

導覽

Breadcrumb 導覽標記 Menu 選單 Pagination 頁數導覽列 Tab 分頁籤

應用程式

App Center 中央區塊 App Drawer 邊緣抽屜 App Layout 格局劃分 App Navbar 導航列 App Sidebar 側邊導覽 App Topbar 頂部列

範例

明暗色系

遵循使用者設定

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

8,964

32

<div class="ts-statistic">
    <div class="value">8,964</div>
    <div class="comparison is-increased">32</div>
</div>

結構

數值

數值會以較大的字體呈現。

19,293

<div class="ts-statistic">
    <div class="value">19,293</div>
</div>

比較數值

表示這個數據自上次以來的差別值。

42,689

195

1,998

13

<div class="ts-statistic">
    <div class="value">42,689</div>
    <div class="comparison is-increased">195</div>
</div>
<div class="ts-statistic">
    <div class="value">1,998</div>
    <div class="comparison is-decreased">13</div>
</div>

單位

指出這個數據的單位為何。

10,000

次

<div class="ts-statistic">
    <div class="value">10,000</div>
    <div class="unit">次</div>
</div>

圖示

在數值旁擺放輔助用的圖示。

30,000

<div class="ts-statistic">
    <span class="ts-icon is-eye-icon"></span>
    <div class="value">30,000</div>
</div>

組合應用

標籤文字

使用統計數據時，通常會建議在其上、下方擺放文字元素表明這個數據是什麼。

下載次數

10,000

次

<div class="ts-text is-label">下載次數</div>
<div class="ts-statistic">
    <div class="value">10,000</div>
    <div class="unit">次</div>
</div>

結構

數值 value 比較數值 is-increased 單位 unit 圖示 {{ts-icon}}

組合應用

標籤文字 {{ts-text}}

GitHub 開始使用元件樣式實際範例

由來自台灣的 Yami Odymel 所設計，當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT，文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言，而卡莉絲伊繁星屬對空音商事。

台灣正體語系協作者：Yami Odymel、coin3x、Sea-n

擁有 Tocas UI 的所屬組織商標