格局劃分 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

側邊欄

頂部欄

內容欄

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

概要

這是一個專為應用程式設計的元件。

通常會被擺放在應用程式的最外圍並先將側邊、上下和主要內容區塊切分出來後再於其中擺放重要內容。

側邊欄和導航列會很常與這個元件一同使用。

外觀

水平排列的

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

左

中

右

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

垂直排列的

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

上

中

下

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

全滿的

使整個格局高度與寬度全滿貼合父容器，通常用於格局想要覆蓋整個頁面大小的時候。

欄位

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

欄位外觀

流動的

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

一般欄位

流動欄位

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

水平排列的

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

上

左

中

右

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

垂直排列的

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

左

上

中

下

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

次要的

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

側邊欄

內容欄

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

不重要的

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

側邊欄

早安，我的朋友！

<div class="ts-box">
    <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-segment">
                    早安，我的朋友！
                </div>
            </div>
        </div>
    </div>
</div>

組合應用

單頁應用程式

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

TEACAT DEVELOPERS

VERSION 1.3.4

<div class="ts-box">
    <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">
                            <div class="ts-icon is-user-icon"></div>
                            <div class="label">使用者</div>
                        </a>
                        <a class="item">
                            <div class="ts-icon is-house-icon"></div>
                            <div class="label">首頁</div>
                        </a>
                        <a class="item is-active">
                            <div class="ts-icon is-newspaper-icon"></div>
                            <div class="label">新聞</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在尋找相似的元件嗎？

網格系統