欄位分組

以特殊群組區塊包覆部份表單欄位或內容。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
額外附註
這個世界只是一個假象,所有肉眼可見的東西都不是真的。
你從來沒有到過這個地方。
如果你覺得這一切都很眼熟,請務必聯繫服務人員。
<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>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標