側邊欄
<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>
<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>