格局劃分

切分應用程式畫面的格局外框。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
側邊欄
頂部欄
內容欄
<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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標