網格系統 - Tocas UI

初入上手

開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive

格局設計

箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap

表單

按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch

文字與段落

分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text

視覺回饋

圓形量測計 Gauge 讀取狀態 Loading 彈出視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar

多媒體與圖示

大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset

資料顯示

可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table

導覽

導覽標記 Breadcrumb 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab

應用程式

格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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

在尋找相似的元件嗎？

概念

欄位與寬度 is-4-wide 欄位換行 is-5-wide 欄位數量 is-3-columns 欄位均分 is-evenly-divided 巢狀式網格 ts-grid

外觀

密度 is-relaxed

響應式設計

自動層疊 is-stackable 雙重層疊 is-doubling 指定寬度 is-16-minimal 可見度 is-not-minimal