欄位分組
以特殊群組區塊包覆部份表單欄位或內容。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
額外附註
這個世界只是一個假象,所有肉眼可見的東西都不是真的。
在時間的盡頭那端,有道不可逆的防火牆。
你從來沒有到過這個地方。如果你覺得這一切都很眼熟,請務必聯繫離你最近的服務人員。
<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-space is-small"></div>
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
    <div class="column">
        <div class="ts-text is-label">監護人姓名</div>
        <div class="ts-space is-small"></div>
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>
<div class="ts-space"></div>
<fieldset class="ts-fieldset">
    <legend>機密資料</legend>
    <div class="ts-grid is-3-columns">
        <div class="column">
            <div class="ts-text is-label">信用卡卡號</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">到期日</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
        <div class="column">
            <div class="ts-text is-label">安全碼</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
    </div>
</fieldset>
外觀
組合應用
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n