網格系統 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>

概要

在 Tocas UI 裡，網格系統的每行都被劃分為 16 格寬度。為了方便展示網格系統，我們將背景加上了灰色與輔助數字，在實際應用中這些都並不會出現。

概念

欄位與寬度

被劃分開來的區塊是「欄位」，每個欄位的寬度都可以自己決定。

Tocas UI 的網格系統每行皆有 16 格寬。這個範例由 2、8、6 格寬的欄位所組成，等於 2 + 8 + 6 = 16 也剛好達到了一行的最大格數。

沒有指定寬度的欄位會以其內容寬度為主。

<div class="ts-grid">
    <div class="column is-2-wide"></div>
    <div class="column is-8-wide"></div>
    <div class="column is-6-wide"></div>
</div>

欄位換行

如果單行欄位的寬度加起來超過 16 格寬，溢出來的欄位會自動換行。這個範例由 5、6、8 格寬的欄位所組成，等於 5 + 6 + 8 = 19，多出來的欄位會換行。

<div class="ts-grid">
    <div class="column is-5-wide"></div>
    <div class="column is-6-wide"></div>
    <div class="column is-8-wide"></div>
</div>

欄位數量

若你希望單行有 3 個欄位，你可能會發現 16 不能被 3 整除。不過你能透過 is-1-columns 到 is-10-columns 直接指定單行要有幾個欄位。

<div class="ts-grid is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-6-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

欄位均分

若希望每個欄位都能有相同的寬度，就可以使用均分。舉例來說：2 個欄位會各佔 50%，而 3 個欄位會均分成 33%…以此類推。

<div class="ts-grid is-evenly-divided">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

巢狀式網格

網格系統內可以還可以再有另一個網格系統。這樣你便能在單個欄位裡再進行寬度細分。

<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-grid is-4-columns">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
    </div>
    <div class="column"></div>
</div>

欄位

流動寬度

使某個欄位的寬度填滿剩餘空白位置。

<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-fluid"></div>
    <div class="column is-4-wide"></div>
</div>

移至首位、尾端

把某個欄位的排序調到第一個或是最後一個。

<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-8-wide is-first"></div>
</div>
<div class="ts-grid">
    <div class="column is-8-wide is-last"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>

指定順序

透過 is-order-1 到 is-order-10 重新排序欄位，使用此功能時所有的欄位都必須指定順序。適合搭配「響應式設計」功能來在行動裝置上重新排序欄位。

<div class="ts-grid">
    <div class="column is-2-wide is-order-4"></div>
    <div class="column is-3-wide is-order-3"></div>
    <div class="column is-4-wide is-order-2"></div>
    <div class="column is-7-wide is-order-1"></div>
</div>

外觀

水平對齊

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

<div class="ts-grid is-start-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-center-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-end-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>

垂直對齊

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

<div class="ts-grid is-top-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-middle-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-bottom-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

高度拉伸的

如果欄位裡有箱型容器或片段，你會需要此樣式拉伸欄位裡的第一層元素，使其高度都與其他欄位相同。

這個片段有一行文字。

這個片段有兩行文字。

這個片段有三行文字。

每個片段高度都一樣。

<div class="ts-grid is-stretched is-3-columns">
    <div class="column">
        <div class="ts-segment">
            <p>這個片段有一行文字。</p>
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            <p>這個片段有兩行文字。</p>
            <p>這個片段有兩行文字。</p>
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            <p>這個片段有三行文字。</p>
            <p>這個片段有三行文字。</p>
            <p>每個片段高度都一樣。</p>
        </div>
    </div>
</div>

分隔的

讓欄位之間有垂直分隔線區隔項目，僅適用於單行的網格系統。

<div class="ts-grid is-divided is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

空白圍繞

使空白圍繞在欄位之間或是周圍。

<div class="ts-grid is-spaced-between">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-spaced-around">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>

顛倒順序

顛倒網格系統裡所有欄位順序，你可以透過搭配「響應式設計」功能來在行動裝置上切換這個樣式（如：將側邊欄改成優先順位）。

<div class="ts-grid is-reversed">
    <div class="column is-2-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-10-wide"></div>
</div>

層疊的

這會不論原訂的欄位寬度，直接將所有欄位各自獨立成為一行（便是將所有欄位設置為 16 格寬）。適合搭配「響應式設計」功能在行動裝置上讓所有欄位層疊起來。

<div class="ts-grid is-stacked">
    <div class="column is-2-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-4-wide"></div>
</div>

密度

網格系統裡欄位的間距可以更密或是更寬鬆。

<div class="ts-grid is-relaxed is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-compact is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

響應式設計

在 Tocas UI 裡，所有東西都可以套用響應式設計系統，所以我們建議你閱讀響應式設計頁面。下列範例僅作為基本的指導教學。

指定寬度

欄位所佔的格數寬度可以依據裝置而有所不同，相關介面尺寸請參閱響應式設計頁面。舉例來說：tablet+:is-8-wide 會在平板或更大的裝置上以 8 格寬的方式呈現。

<div class="ts-grid">
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
</div>

自動層疊

這會不論原訂的欄位寬度，在手機裝置時套用 is-stacked 層疊樣式並令所有欄位各自獨立成為一行（便是將所有欄位設置為 16 格寬）。

<div class="ts-grid mobile:is-stacked">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>

指定數量

你可以在指定裝置上變更一個網格系統的欄位數量，這個範例的 mobile:is-2-columns 表示行動裝置會有 2 欄，而 tablet+:is-3-columns 是指平板或是更大的裝置會有 3 欄。

<div class="ts-grid mobile:is-2-columns tablet+:is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

可見度

某些欄位可以只在指定介面尺寸上呈現、隱藏，相關使用方式請參閱響應式設計頁面。

<div class="ts-grid">
    <div class="column mobile:has-hidden is-4-wide"></div>
    <div class="column tablet+:has-hidden is-4-wide"></div>
    <div class="column desktop-:has-hidden is-4-wide"></div>
    <div class="column widescreen:has-hidden is-4-wide"></div>
</div>

組合應用

搜尋欄位

通常搜尋欄位會有流動欄位與一個固定欄位，沒有指定寬度的欄位會以其內容寬度為主。

<div class="ts-grid">
    <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>

變數與屬性

	預設值	說明	對象
--gap	`1rem`	欄位之間的空白間隙像素寬度。	`.ts-grid`

在尋找相似的元件嗎？

間隔容器