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-loading"></div>
外觀
缺口的

以另一個看起來有缺口的圓圈作為載入圖示。

<div class="ts-loading is-notched"></div>
置中的

讓讀取狀態的圖示置中呈現。

<div class="ts-loading is-centered"></div>
尺寸

更改讀取狀態的大小。

<div class="ts-loading is-small"></div>
<div class="ts-loading"></div>
<div class="ts-loading is-large"></div>
在尋找相似的元件嗎？
外觀
缺口的 is-notched 置中的 is-centered 尺寸 is-small
GitHub 開始使用 元件樣式 實際範例
由來自 台灣的 Yami Odymel 所設計，當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT，文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言，而卡莉絲伊繁星屬對空音商事。
台灣正體語系協作者：Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標