格局劃分 - 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-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>

在尋找相似的元件嗎？

網格系統

外觀

水平排列的 is-horizontal 垂直排列的 is-vertical 全滿的 is-full

欄位外觀

流動的 is-fluid 水平排列的 is-horizontal 垂直排列的 is-vertical 可捲動的 is-scrollable 次要的 is-secondary 不重要的 is-tertiary

組合應用

單頁應用程式 {{ts-app-sidebar}}