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 頂部列

範例

明暗色系

遵循使用者設定

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-file">
    <input type="file" />
</div>

狀態

停用的

使檔案欄位呈現無法互動、點擊的模樣。

<div class="ts-file">
    <input type="file" disabled />
</div>

外觀

實心填充的

帶有實心背景的欄位能更明確地呈現這是可供互動的元素。

<div class="ts-file is-solid">
    <input type="file" />
</div>

底線的

以實心背景和底線明顯呈現一個欄位，讓使用者如填寫表單一樣。

<div class="ts-file is-underlined">
    <input type="file" />
</div>

負面的

令一個欄位看起來帶有負面或危險的狀態，通常可能是指這個欄位沒有選擇檔案。

<div class="ts-file is-negative">
    <input type="file" />
</div>

尺寸

更改檔案上傳的尺寸與文字大小。

<div class="ts-file is-small">
    <input type="file" />
</div>
<div class="ts-file">
    <input type="file" />
</div>
<div class="ts-file is-large">
    <input type="file" />
</div>

密度

變更檔案上傳的高度，看起來更緊密或是令人感到寬鬆。

<div class="ts-file is-dense">
    <input type="file" />
</div>
<div class="ts-file">
    <input type="file" />
</div>
<div class="ts-file is-relaxed">
    <input type="file" />
</div>

狀態

停用的 disabled

外觀

實心填充的 is-solid 底線的 is-underlined 負面的 is-negative 尺寸 is-small 密度 is-dense

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

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

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

擁有 Tocas UI 的所屬組織商標