水平排列 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-row">
    <div class="column is-fluid">
        <div class="ts-input">
            <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">
            <input type="text" class="input" placeholder="搜尋文章…" />
        </div>
    </div>
    <div class="column">
        <button class="ts-button">送出</button>
    </div>
</div>

外觀

均分寬度

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

這個項目 50% 寬度

這個項目 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.

<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>

在尋找相似的元件嗎？