格局劃分 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

側邊欄

頂部欄

內容欄

<div class="ts-app-layout is-horizontal">
    <div class="cell">
        <div class="ts-content">側邊欄</div>
    </div>
    <div class="cell is-fluid is-vertical">
        <div class="cell">
            <div class="ts-content">頂部欄</div>
        </div>
        <div class="cell">
            <div class="ts-content">內容欄</div>
        </div>
    </div>
</div>

概要

通常用於規劃單頁應用程式的主要格局，預設會以 100% 的寬高填滿父容器。

格局劃分經常與側邊導覽和導航列元件一同使用。

外觀

水平排列的

格局內的子欄位會依照左右排列。

左

中

右

<div class="ts-app-layout is-horizontal">
    <div class="cell is-fluid">
        <div class="ts-content">左</div>
    </div>
    <div class="cell is-fluid">
        <div class="ts-content">中</div>
    </div>
    <div class="cell is-fluid">
        <div class="ts-content">右</div>
    </div>
</div>

垂直排列的

格局內的子欄位會依照上下排列。

上

中

下

<div class="ts-app-layout is-vertical">
    <div class="cell">
        <div class="ts-content">上</div>
    </div>
    <div class="cell">
        <div class="ts-content">中</div>
    </div>
    <div class="cell">
        <div class="ts-content">下</div>
    </div>
</div>

全螢幕的

使格局劃分貼滿整個螢幕，而不只是父容器。

欄位

<div class="ts-app-layout is-horizontal is-fullscreen">
    <div class="cell">
        <div class="ts-content">欄位</div>
    </div>
</div>

欄位外觀

流動的

預設的欄位寬度會以其最小內容為主，若要某個欄位填滿剩餘空間則需使用此樣式。

一般欄位

流動欄位

<div class="ts-app-layout is-horizontal">
    <div class="cell">
        <div class="ts-content">一般欄位</div>
    </div>
    <div class="cell is-fluid">
        <div class="ts-content">流動欄位</div>
    </div>
</div>

水平排列的

欄位裡的巢狀子欄位會依照左右排列。

上

左

中

右

<div class="ts-app-layout is-vertical">
    <div class="cell">
        <div class="ts-content">上</div>
    </div>
    <div class="cell is-horizontal">
        <div class="cell is-fluid">
            <div class="ts-content">左</div>
        </div>
        <div class="cell is-fluid">
            <div class="ts-content">中</div>
        </div>
        <div class="cell is-fluid">
            <div class="ts-content">右</div>
        </div>
    </div>
</div>

垂直排列的

欄位裡的巢狀子欄位會依照上下排列。

左

上

中

下

<div class="ts-app-layout is-horizontal">
    <div class="cell">
        <div class="ts-content">左</div>
    </div>
    <div class="cell is-vertical is-fluid">
        <div class="cell">
            <div class="ts-content">上</div>
        </div>
        <div class="cell">
            <div class="ts-content">中</div>
        </div>
        <div class="cell">
            <div class="ts-content">下</div>
        </div>
    </div>
</div>

可捲動的

使其中一個欄位在內容過長時可以上下捲動其捲軸。

頁頭

Fusce non enim egestas, lobortis diam et, congue felis.

Rhoncus est sed laoreet facilisis. Suspendisse ante odio,

pulvinar non nulla sed, consequat lacinia risus.

Aliquam mollis pulvinar lorem sed efficitur.

頁腳

<div class="ts-app-layout is-vertical" style="height: 260px">
    <div class="cell">
        <div class="ts-content">頁頭</div>
    </div>
    <div class="cell is-scrollable is-fluid">
        <div class="ts-content">
            <p>Fusce non enim egestas, lobortis diam et, congue felis.</p>
            <p>Rhoncus est sed laoreet facilisis. Suspendisse ante odio,</p>
            <p>pulvinar non nulla sed, consequat lacinia risus.</p>
            <p>Aliquam mollis pulvinar lorem sed efficitur.</p>
        </div>
    </div>
    <div class="cell">
        <div class="ts-content">頁腳</div>
    </div>
</div>

次要的

其次的背景色調令使用者知道這不是內容主體。

側邊欄

內容欄

<div class="ts-app-layout is-horizontal">
    <div class="cell is-secondary">
        <div class="ts-content">側邊欄</div>
    </div>
    <div class="cell is-fluid">
        <div class="ts-content">內容欄</div>
    </div>
</div>

不重要的

最不重要的背景色能夠使主體突出。

側邊欄

早安，我的朋友！

<div class="ts-app-layout is-horizontal">
    <div class="cell">
        <div class="ts-content">側邊欄</div>
    </div>
    <div class="cell is-tertiary is-fluid">
        <div class="ts-content">
            <div class="ts-box">
                <div class="ts-content">
                    早安，我的朋友！
                </div>
            </div>
        </div>
    </div>
</div>

組合應用

單頁應用程式

透過搭配側邊導覽和導航列就能夠很輕鬆地做出一個單頁應用程式的框架。

TEACAT DEVELOPERS

VERSION 1.3.4

<div class="ts-app-layout is-horizontal">
    <div class="cell" style="width: 245px">
        <div class="ts-content">
            <div class="ts-header is-big is-heavy">
                TEACAT DEVELOPERS
            </div>
            <div class="ts-text is-description is-heavy">
                VERSION 1.3.4
            </div>
        </div>
        <div class="ts-app-sidebar">
            <div class="header">
                啟動
            </div>
            <a class="item">
                <span class="ts-icon is-house-icon"></span> 首頁
            </a>
            <div class="header">
                管理
            </div>
            <a class="item is-active">
                <span class="ts-icon is-user-icon"></span> 使用者
            </a>
            <a class="item">
                <span class="ts-icon is-download-icon"></span> 下載檔案
            </a>
            <div class="header">
                系統
            </div>
            <a class="item">
                <span class="ts-icon is-gears-icon"></span> 偏好設定
            </a>
        </div>
        <div class="ts-content">
            <button class="ts-button is-outlined is-fluid">
                登出
            </button>
        </div>
    </div>
    <div class="cell is-fluid is-vertical">
        <div class="cell is-fluid is-secondary"></div>
        <div class="cell">
            <div class="ts-content">
                <div class="ts-app-navbar is-fluid">
                    <a class="item">
                        <span class="ts-icon is-user-icon"></span>
                        <div class="label">使用者</div>
                    </a>
                    <a class="item">
                        <span class="ts-icon is-house-icon"></span>
                        <div class="label">首頁</div>
                    </a>
                    <a class="item is-active">
                        <span class="ts-icon is-newspaper-icon"></span>
                        <div class="label">新聞</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

在尋找相似的元件嗎？

網格系統