台灣正體

指撥開關

提供一個僅有開、關狀態的選項。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<label class="ts-switch">
    <input type="checkbox" checked />
    斷路保護措施
</label>
狀態
停用的

使指撥開關呈現無法互動、點擊的模樣。若你希望真正地停用開關行為,請在該指撥開關增加 disabled 標籤以符合 HTML 規範。

<label class="ts-switch is-disabled">
    <input type="checkbox" />
    進階模式
</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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標