表單控制項 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

使用者名稱

<div class="ts-control">
    <div class="label">使用者名稱</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

概要

這個通常用在表單輸入欄位上，這會單純地將欄位區分為標籤、內容，可以說是帶有固定寬度的網格系統。

外觀

標籤對齊

標籤可以置起始位置，但這樣可能會讓標籤距離內容欄位太遠而不好辨識。

年齡

<div class="ts-control">
    <div class="label is-start-aligned">年齡</div>
    <div class="content">
        <div class="ts-input">
            <input type="number">
        </div>
    </div>
</div>

內距增高的

如果在內容欄位裡擺放純文字或是某些較矮的元素則需要特別增高內距以避免其高度無法與標籤對齊。

電子信箱地址

[email protected]

封鎖廣告內容

啟用

<div class="ts-control">
    <div class="label">電子信箱地址</div>
    <div class="content is-padded">
        [email protected]
    </div>
</div>
<div class="ts-control">
    <div class="label">封鎖廣告內容</div>
    <div class="content is-padded">
        <label class="ts-switch">
            <input type="checkbox" checked />
            啟用
        </label>
    </div>
</div>

流動的

內容欄位預設的寬度不是全寬，如果希望填滿父容器寬度則可以使用此樣式。

暱稱

<div class="ts-control">
    <div class="label">暱稱</div>
    <div class="content is-fluid">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

較寬的

使整個控制項運用更多的空白，適合較窄的容器。

標籤

<div class="ts-control">
    <div class="label">標籤</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>
<div class="ts-control is-wide">
    <div class="label">標籤</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

層疊的

這會讓原本左右欄位的設計變成上下層疊，適合搭配「響應式設計」功能在行動裝置上讓所有欄位層疊起來。

使用者名稱

<div class="ts-control is-stacked">
    <div class="label">使用者名稱</div>
    <div class="content">
        <div class="ts-input">
            <input type="text">
        </div>
    </div>
</div>

組合應用

區段分隔線

如果有兩個控制項欄位互不相關，可以考慮透過區段分隔線將其分開。

使用者名稱

密碼

行銷通知

我想接收到更多的電子信箱通知。

<div class="ts-wrap is-vertical">
    <div class="ts-control">
        <div class="label">使用者名稱</div>
        <div class="content">
            <div class="ts-input">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-control">
        <div class="label">密碼</div>
        <div class="content">
            <div class="ts-input">
                <input type="password">
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-control">
        <div class="label">行銷通知</div>
        <div class="content is-padded">
            <label class="ts-switch">
                <input type="checkbox" checked />
                我想接收到更多的電子信箱通知。
            </label>
        </div>
    </div>
</div>

特別區塊

透過內容區塊點綴也能讓某個控制項看起來像一個獨立的邏輯區塊。

真實姓名

危險地區

注意，你將無法復原這項行為。

<div class="ts-wrap is-vertical">
    <div class="ts-control">
        <div class="label">真實姓名</div>
        <div class="content">
            <div class="ts-input">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-control">
        <div class="label">危險地區</div>
        <div class="content">
            <div class="ts-content is-rounded is-secondary is-padded">
                <button class="ts-button is-outlined is-negative">
                    移除使用者
                </button>
                <div class="ts-text is-description has-top-spaced-small">
                    注意，你將無法復原這項行為。
                </div>
            </div>
        </div>
    </div>
</div>

變數與屬性

	預設值	說明	對象
--label-width	`220px`	標籤欄位的像素寬度。	`.ts-control`

在尋找相似的元件嗎？

網格系統