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

台灣正體

台灣正體

GitHub

Tocas UI

台灣正體

台灣正體

統計數據

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

初入上手

開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities

格局設計

箱型容器 Box 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 間隔容器 Wrap

表單

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

文字與段落

分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text

視覺回饋

空白看板 Blankslate 圓形量測計 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 模組

選單模組 DropdownJS 工具提示 TooltipJS 分頁模組 TabJS 樣式切換 ToggleJS

範例

明暗色系

遵循使用者設定

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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 的所屬組織商標