選項按鈕 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

早餐

<label class="ts-radio">
    <input name="eat" type="radio" checked />
    早餐
</label>

狀態

停用的

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

Arch Linux

<label class="ts-radio is-disabled">
    <input name="linux" type="radio" />
    Arch Linux
</label>

外觀

負面的

表示一個單選方塊可能沒有被選取。

愛情摩天輪

<label class="ts-radio is-negative">
    <input name="love" type="radio" />
    愛情摩天輪
</label>

單獨的

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

<label class="ts-radio is-solo">
    <input name="solo" type="radio" />
</label>

尺寸

更改選項按鈕的大小。

小型選項

預設選項

大型選項

<label class="ts-radio is-small">
    <input name="size" type="radio" checked />
    小型選項
</label>
<label class="ts-radio">
    <input name="size" type="radio" />
    預設選項
</label>
<label class="ts-radio is-large">
    <input name="size" type="radio" />
    大型選項
</label>

組合應用

鄰近選項按鈕

透過間隔容器元件能讓核取方塊以左右、上下排列並保持一定的間距。

性別

男性女性其它

來電狀態

響鈴震動靜音

<div class="ts-wrap is-vertical">
    <div class="ts-text is-label">性別</div>
    <div class="ts-wrap">
        <label class="ts-radio">
            <input name="gender" type="radio" checked />
            男性
        </label>
        <label class="ts-radio">
            <input name="gender" type="radio" />
            女性
        </label>
        <label class="ts-radio">
            <input name="gender" type="radio" />
            其它
        </label>
    </div>
    <div class="ts-text is-label">來電狀態</div>
    <div class="ts-wrap is-vertical is-compact">
        <label class="ts-radio">
            <input name="ring" type="radio" checked />
            響鈴
        </label>
        <label class="ts-radio">
            <input name="ring" type="radio" />
            震動
        </label>
        <label class="ts-radio">
            <input name="ring" type="radio" />
            靜音
        </label>
    </div>
</div>

在尋找相似的元件嗎？