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

GitHub

Tocas UI

範圍滑桿

可以在指定範圍內選擇數值的滑桿。

從此開始

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

格局設計

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

表單

Button 按鈕 Checkbox 核取方塊 Fieldset 欄位分組 File 檔案上傳 Input 輸入欄位 Radio 單選方塊 Range 範圍滑桿 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-range">
    <input type="range">
</div>

種類

步進的

指定 [step] 屬性可以讓數值以指定間隔進行變動。

<div class="ts-range">
    <input type="range" min="0" max="5" step="1">
</div>

狀態

停用的

使範圍滑桿呈現無法互動、點擊的模樣。

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

種類

步進的 step

狀態

停用的 disabled

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

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

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

擁有 Tocas UI 的所屬組織商標