欄位分組 - 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" disabled>
    <legend>被停用的表單</legend>
    <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" value="Yami Odymel">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">聯絡電話</div>
            <div class="ts-input has-top-spaced">
                <input type="text" value="0987123456">
            </div>
        </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>