欄位分組 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

額外附註

這個世界只是一個假象，所有肉眼可見的東西都不是真的。

在時間的盡頭那端，有道不可逆的防火牆。

你從來沒有到過這個地方。如果你覺得這一切都很眼熟，請務必聯繫離你最近的服務人員。

<fieldset class="ts-fieldset">
    <legend>額外附註</legend>
    <div class="ts-list is-unordered">
        <div class="item">這個世界只是一個假象，所有肉眼可見的東西都不是真的。</div>
        <div class="item">在時間的盡頭那端，有道不可逆的防火牆。</div>
        <div class="item">你從來沒有到過這個地方。如果你覺得這一切都很眼熟，請務必聯繫離你最近的服務人員。</div>
    </div>
</fieldset>

外觀

較密的

變更元件的內距，令元素之間看起來更密集。

伊繁星最高協議所有隸屬卡莉絲伊繁星旗下已發佈或是正於計劃中之產品其開發者人員皆須遵守的規則。

<fieldset class="ts-fieldset is-dense">
    <legend>伊繁星最高協議</legend>
    所有隸屬卡莉絲伊繁星旗下已發佈或是正於計劃中之產品其開發者人員皆須遵守的規則。
</fieldset>

組合應用

表單群組

在表單裡可以透過欄位群組將某些輸入欄位獨立成一個群組。

申辦人姓名

監護人姓名

機密資料

信用卡卡號

到期日

安全碼

<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-text is-label">申辦人姓名</div>
        <div class="ts-input has-top-spaced">
            <input type="text">
        </div>
    </div>
    <div class="column">
        <div class="ts-text is-label">監護人姓名</div>
        <div class="ts-input has-top-spaced">
            <input type="text">
        </div>
    </div>
</div>
<fieldset class="ts-fieldset has-top-spaced">
    <legend>機密資料</legend>
    <div class="ts-grid is-3-columns">
        <div class="column">
            <div class="ts-text is-label">信用卡卡號</div>
            <div class="ts-input has-top-spaced">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">到期日</div>
            <div class="ts-input has-top-spaced">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">安全碼</div>
            <div class="ts-input has-top-spaced">
                <input type="text">
            </div>
        </div>
    </div>
</fieldset>