間隔容器
在項目之間自動以空白區隔。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-wrap">
    <button class="ts-button">按鈕</button>
    <button class="ts-button">按鈕</button>
    <button class="ts-button">按鈕</button>
</div>
概要

被擺置在這個元件裡的所有項目都會自動以空白區隔,可以說是一個非常無腦的元件。

項目會在過寬的時候自動換行,如果希望有個項目可以填滿剩餘空間,請使用水平排列

外觀
垂直的

將排列的方向改為上下垂直。

片段
片段
片段
<div class="ts-wrap is-vertical">
    <div class="ts-segment">片段</div>
    <div class="ts-segment">片段</div>
    <div class="ts-segment">片段</div>
</div>
水平對齊

項目可以選擇靠左、中或右對齊。

置左對齊
置中對齊
置右對齊
<div class="ts-wrap is-start-aligned">
    <div class="ts-segment" style="width: 160px;">
        置左對齊
    </div>
</div>
<div class="ts-wrap is-center-aligned">
    <div class="ts-segment" style="width: 160px;">
        置中對齊
    </div>
</div>
<div class="ts-wrap is-end-aligned">
    <div class="ts-segment" style="width: 160px;">
        置右對齊
    </div>
</div>
垂直對齊

根據項目之間的高度,可以更改其上、中或下對齊方式。

Consectetur adipiscing elit. In fermentum metus dolor.
置上對齊
Consectetur adipiscing elit. In fermentum metus dolor.
Consectetur adipiscing elit. In fermentum metus dolor.
置中對齊
Consectetur adipiscing elit. In fermentum metus dolor.
Consectetur adipiscing elit. In fermentum metus dolor.
置下對齊
Consectetur adipiscing elit. In fermentum metus dolor.
<div class="ts-wrap is-top-aligned">
    <div class="ts-segment" style="width: 25%;">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
    <div class="ts-segment" style="width: 25%;">
        置上對齊
    </div>
    <div class="ts-segment" style="width: 25%;">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
</div>
<div class="ts-wrap is-middle-aligned">
    <div class="ts-segment" style="width: 25%;">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
    <div class="ts-segment" style="width: 25%;">
        置中對齊
    </div>
    <div class="ts-segment" style="width: 25%;">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
</div>
<div class="ts-wrap is-bottom-aligned">
    <div class="ts-segment" style="width: 25%;">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
    <div class="ts-segment" style="width: 25%;">
        置下對齊
    </div>
    <div class="ts-segment" style="width: 25%;">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
</div>
密度

欄位的間距可以更密或是更寬鬆。

項目
項目
項目
項目
項目
項目
<div class="ts-wrap is-relaxed">
    <div class="ts-segment">項目</div>
    <div class="ts-segment">項目</div>
</div>
<div class="ts-wrap">
    <div class="ts-segment">項目</div>
    <div class="ts-segment">項目</div>
</div>
<div class="ts-wrap is-compact">
    <div class="ts-segment">項目</div>
    <div class="ts-segment">項目</div>
</div>
組合應用
關聯標籤

擺放一些可能會換行的元件(如:關聯標籤)可以讓他們仍然保持完美的空白間隙。

Yami Odymel
Jasper Yu
Henry Wu
Sean
Choukai
Tsundere Chen
Hiram Huang
<div class="ts-wrap is-compact">
    <div class="ts-chip">
        <img src="user.png" />
        Yami Odymel
    </div>
    <div class="ts-chip">
        <img src="user.png" />
        Jasper Yu
    </div>
    <div class="ts-chip">
        <img src="user.png" />
        Henry Wu
    </div>
    <div class="ts-chip">
        <img src="user.png" />
        Sean
    </div>
    <div class="ts-chip">
        <img src="user.png" />
        Choukai
    </div>
    <div class="ts-chip">
        <img src="user.png" />
        Tsundere Chen
    </div>
    <div class="ts-chip">
        <img src="user.png" />
        Hiram Huang
    </div>
</div>
表單欄位

表單的欄位通常會是垂直排列,若希望每個欄位之間都能有空白則間隔容器就會是最佳首選。

使用者帳號
密碼
<div class="ts-wrap is-vertical">
    <div class="ts-text is-label">使用者帳號</div>
    <div class="ts-input is-start-icon">
        <span class="ts-icon is-user-icon"></span>
        <input type="text" />
    </div>
    <div class="ts-text is-label">密碼</div>
    <div class="ts-input is-start-icon">
        <span class="ts-icon is-lock-icon"></span>
        <input type="password" />
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n