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 頂部列
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小 
<label class="ts-switch">
    <input type="checkbox" checked>
    斷路保護措施
</label>
狀態
停用的

使指撥開關呈現無法互動、點擊的模樣。

<label class="ts-switch">
    <input type="checkbox" disabled>
    進階模式
</label>
外觀
負面的

表示一個指撥開關可能沒有被啟用。

<label class="ts-switch is-negative">
    <input type="checkbox">
    自動偵測垃圾訊息
</label>
單獨的

指撥開關如果沒有任何標籤文字，可以將其指定為單獨的開關，藉此來移除多餘的間距。

<label class="ts-switch is-solo">
    <input type="checkbox">
</label>
尺寸

更改指撥開關的大小。

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