表單控制項

帶有標籤欄位的特定排版格局。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
使用者名稱
<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>
內距增高的

若內容欄位有文字或是較矮的元素,需要增高內距才能與一旁的標籤對齊。

電子信箱地址
封鎖廣告內容
<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>
樣式變數
說明

標籤欄位的寬度。

在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標