此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

項目切換

以近似開關的外觀方式在提供的選項之間來回切換。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-selection">
    <label class="item">
        <input type="radio" name="aircon" checked />
        <div class="text">冷氣</div>
    </label>
    <label class="item">
        <input type="radio" name="aircon" />
        <div class="text">暖氣</div>
    </label>
    <label class="item">
        <input type="radio" name="aircon" />
        <div class="text">送風</div>
    </label>
</div>
概要

在使用這個元件的時候,我們建議至少預設要有一個被啟用的項目以避免使用者不知道這是一個可供互動的表單控制元件。

這個元件是用來在不同模式或選項中來回切換,如果希望以此來切換內容請使用分頁籤

狀態
停用的

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

<div class="ts-selection">
    <label class="item is-disabled">
        <input type="radio" name="version" />
        <div class="text">標準</div>
    </label>
    <label class="item">
        <input type="radio" name="version" checked />
        <div class="text">進階</div>
    </label>
    <label class="item">
        <input type="radio" name="version" />
        <div class="text">測試</div>
    </label>
</div>
外觀
圓角的

將邊緣角落以圓角處理。

<div class="ts-selection is-circular">
    <label class="item">
        <input type="radio" name="audio" checked />
        <div class="text">低音</div>
    </label>
    <label class="item">
        <input type="radio" name="audio" />
        <div class="text">中音</div>
    </label>
    <label class="item">
        <input type="radio" name="audio" />
        <div class="text">高音</div>
    </label>
</div>
流動的

項目切換的寬度可以是最大的直至與父容器相等。

<div class="ts-selection is-fluid">
    <label class="item">
        <input type="radio" name="language" />
        <div class="text">台灣正體</div>
    </label>
    <label class="item">
        <input type="radio" name="language" checked />
        <div class="text">英文</div>
    </label>
    <label class="item">
        <input type="radio" name="language" />
        <div class="text">日本語</div>
    </label>
</div>
尺寸

更改項目切換的大小。

<div class="ts-selection is-small">
    <label class="item">
        <input type="radio" name="size-1" checked />
        <div class="text">小型項目</div>
    </label>
    <label class="item">
        <input type="radio" name="size-1" />
        <div class="text">小型項目</div>
    </label>
</div>
<div class="ts-selection">
    <label class="item">
        <input type="radio" name="size-2" checked />
        <div class="text">預設項目</div>
    </label>
    <label class="item">
        <input type="radio" name="size-2" />
        <div class="text">預設項目</div>
    </label>
</div>
<div class="ts-selection is-large">
    <label class="item">
        <input type="radio" name="size-3" checked />
        <div class="text">大型項目</div>
    </label>
    <label class="item">
        <input type="radio" name="size-3" />
        <div class="text">大型項目</div>
    </label>
</div>
較密的

變更元件的內距,令元素之間看起來更密集。

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