網格系統 - 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 格寬度。為了方便展示網格系統，我們將背景加上了灰色與輔助數字，在實際應用中這些都並不會出現。

如果你希望有個欄位可以填滿剩餘空間，請參閱水平排列元件。

概念

欄位與寬度

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

正如前言所述：「每行有 16 格寬」，而這個範例的第一行正好有四個 4 格寬的欄位，所以 4 x 4 = 16 剛好是 16 格。

另一行是則是由 2 格、8 格還有 6 格寬的欄位所組成，這意味著 2 + 8 + 6 = 16 也剛好達到了一行的最大格數。

<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 class="column is-2-wide"></div>
    <div class="column is-8-wide"></div>
    <div class="column is-6-wide"></div>
</div>

欄位換行

如果單行欄位的寬度加起來超過 16 格寬，溢出來的欄位會自動換行。

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

欄位數量

若希望單行裡面有三個欄位，你可能會發現…噢不！16 格並沒有辦法整除 3！這個時候可以直接指定網格系統的單行要有幾個欄位。

<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 個欄位那麼就會各佔一半的寬度，若有 3 個欄位則是每個都三分之一…以此類推。

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

響應式設計

自動層疊

這會不論原訂的欄位寬度，在最小化介面時會自動令所有欄位各自獨立成為一行（便是將所有欄位設置為 16 格寬）。

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

雙重層疊

這會讓你的欄位在最小化和標準介面上以雙倍的寬度增加，例如：8 個欄位的網格系統會在標準介面上變成 4 個欄位，然後最小化介面上則會變成 2 個欄位。

<div class="ts-grid is-doubling is-8-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 class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-doubling 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>
<div class="ts-grid is-doubling is-4-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

指定寬度

欄位所佔的格數寬度可以依據介面狀態而有所不同，相關介面尺寸請參閱響應式設計頁面。舉例來說：is-8-minimal 會在最小化介面上以 8 格寬的方式呈現。

<div class="ts-grid">
    <div class="column is-16-minimal is-8-standard is-4-maximal"></div>
    <div class="column is-16-minimal is-8-standard is-4-maximal"></div>
    <div class="column is-16-minimal is-8-standard is-4-maximal"></div>
    <div class="column is-16-minimal is-8-standard is-4-maximal"></div>
</div>

可見度

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

<div class="ts-grid">
    <div class="column is-not-minimal is-4-wide"></div>
    <div class="column is-minimal-only is-4-wide"></div>
    <div class="column is-standard-only is-4-wide"></div>
    <div class="column is-maximal-only is-4-wide"></div>
</div>

在尋找相似的元件嗎？