水平排列

以左右水平的方式排列元素並自由延展其寬度。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-row">
    <div class="column is-fluid">
        <div class="ts-input is-fluid">
            <input type="text" class="input" placeholder="搜尋文章…" />
        </div>
    </div>
    <div class="column">
        <button class="ts-button">送出</button>
    </div>
</div>
概要

這個元素有點近似於網格系統,但水平排列可以特別令某個欄位填滿剩餘空間。

間隔容器不同的是:水平排列的項目絕對不會換行。

內容
欄位

排列裡的每個元素都必須要以欄位包覆。

項目
項目
<div class="ts-row">
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
</div>
欄位外觀
流動的

使某個欄位的寬度填滿剩餘空白位置,這會令其他欄位空間被壓縮到最小。

<div class="ts-row">
    <div class="column is-fluid">
        <div class="ts-input is-fluid">
            <input type="text" class="input" placeholder="搜尋文章…" />
        </div>
    </div>
    <div class="column">
        <button class="ts-button">送出</button>
    </div>
</div>
外觀
均分寬度

每個項目的寬度可以被平均分配,若有兩個則是 50%,三個則為 100% ÷ 3…等以此類推。

這個項目 50% 寬度
這個項目 50% 寬度
這個項目 33% 寬度
這個項目 33% 寬度
這個項目 33% 寬度
<div class="ts-row is-evenly-divided">
    <div class="column">
        <div class="ts-segment">這個項目 50% 寬度</div>
    </div>
    <div class="column">
        <div class="ts-segment">這個項目 50% 寬度</div>
    </div>
</div>
<div class="ts-row is-evenly-divided">
    <div class="column">
        <div class="ts-segment">這個項目 33% 寬度</div>
    </div>
    <div class="column">
        <div class="ts-segment">這個項目 33% 寬度</div>
    </div>
    <div class="column">
        <div class="ts-segment">這個項目 33% 寬度</div>
    </div>
</div>
水平對齊

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

置左對齊
置中對齊
置右對齊
<div class="ts-row is-start-aligned">
    <div class="column">
        <div class="ts-segment" style="width: 160px;">
            置左對齊
        </div>
    </div>
</div>
<div class="ts-row is-center-aligned">
    <div class="column">
        <div class="ts-segment" style="width: 160px;">
            置中對齊
        </div>
    </div>
</div>
<div class="ts-row is-end-aligned">
    <div class="column">
        <div class="ts-segment" style="width: 160px;">
            置右對齊
        </div>
    </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-row is-top-aligned">
    <div class="column">
        <div class="ts-segment">
            Consectetur adipiscing elit.<br>
            In fermentum metus dolor.
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            置上對齊
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            Consectetur adipiscing elit.<br>
            In fermentum metus dolor.
        </div>
    </div>
</div>
<div class="ts-row is-middle-aligned">
    <div class="column">
        <div class="ts-segment">
            Consectetur adipiscing elit.<br>
            In fermentum metus dolor.
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            置中對齊
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            Consectetur adipiscing elit.<br>
            In fermentum metus dolor.
        </div>
    </div>
</div>
<div class="ts-row is-bottom-aligned">
    <div class="column">
        <div class="ts-segment">
            Consectetur adipiscing elit.<br>
            In fermentum metus dolor.
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            置下對齊
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            Consectetur adipiscing elit.<br>
            In fermentum metus dolor.
        </div>
    </div>
</div>
密度

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

項目
項目
項目
項目
項目
項目
<div class="ts-row is-relaxed is-evenly-divided">
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
</div>
<div class="ts-row is-evenly-divided">
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
</div>
<div class="ts-row is-compact is-evenly-divided">
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
    <div class="column">
        <div class="ts-segment">項目</div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標