表單控制項 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

使用者名稱

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

概要

這個通常用在表單輸入欄位上，這會單純地將欄位區分為標籤、內容，可以說是帶有固定寬度的網格系統。這個元件並不太適合應用於響應式設計的網頁，因為其要求父容器要有一定的寬度。此時建議使用網格系統來建立一個更彈性的表單會較為合適。

外觀

標籤對齊

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

年齡

<div class="ts-control">
    <div class="label is-start-aligned">年齡</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <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 is-fluid">
            <input type="text">
        </div>
    </div>
</div>

較寬的

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

標籤

<div class="ts-control">
    <div class="label">標籤</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>
<div class="ts-control is-wide">
    <div class="label">標籤</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <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 is-fluid">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-control">
        <div class="label">密碼</div>
        <div class="content">
            <div class="ts-input is-fluid">
                <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 is-fluid">
                <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-space is-small"></div>
                <div class="ts-text is-description">注意，你將無法復原這項行為。</div>
            </div>
        </div>
    </div>
</div>

在尋找相似的元件嗎？