項目切換 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

冷氣

暖氣

送風

<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>

概要

這個元件能在不同選項中來回切換。如果希望用來切換內容，請使用分頁籤。

狀態

停用的

使項目選擇呈現無法互動、點擊的模樣。

標準

進階

測試

<div class="ts-selection">
    <label class="item">
        <input type="radio" name="version" disabled />
        <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="density-1" checked />
        <div class="text">緊密項目</div>
    </label>
    <label class="item">
        <input type="radio" name="density-1" />
        <div class="text">緊密項目</div>
    </label>
</div>
<div class="ts-selection">
    <label class="item">
        <input type="radio" name="density-2" checked />
        <div class="text">預設項目</div>
    </label>
    <label class="item">
        <input type="radio" name="density-2" />
        <div class="text">預設項目</div>
    </label>
</div>
<div class="ts-selection is-relaxed">
    <label class="item">
        <input type="radio" name="density-3" checked />
        <div class="text">寬鬆項目</div>
    </label>
    <label class="item">
        <input type="radio" name="density-3" />
        <div class="text">寬鬆項目</div>
    </label>
</div>

在尋找相似的元件嗎？