頂部列 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-app-topbar">
    <div class="start">
        <div class="item is-text">應用程式</div>
    </div>
    <div class="end">
        <a class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </a>
        <a class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </a>
    </div>
</div>

概要

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

通常被擺放在應用程式的最上方且僅會有標題文字或是功能按鈕。

內容

位置

頂部列被劃分為 start（起始）、center（中間）和 end（尾端）三個區塊，可以用來擺放不同內容。

<div class="ts-app-topbar">
    <div class="start">
        <a class="item">
            <span class="ts-icon is-chevron-left-icon"></span>
        </a>
    </div>
    <div class="center">
        <div class="item is-text">我的相簿</div>
    </div>
    <div class="end">
        <a class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </a>
        <a class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </a>
    </div>
</div>

文字項目

專門呈現文字的項目，通常用以擺放應用程式的標題名稱。

<div class="ts-app-topbar">
    <div class="start">
        <div class="item is-text">檢視 PDF 文件</div>
    </div>
    <div class="end">
        <a class="item">
            <span class="ts-icon is-circle-question-icon"></span>
        </a>
    </div>
</div>

內容

頂部列可以擺放額外的內容或選單。

<div class="ts-app-topbar">
    <div class="start">
        <a class="item">
            <span class="ts-icon is-arrow-left-icon"></span>
        </a>
    </div>
    <div class="end">
        <a class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </a>
        <a class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </a>
    </div>
    <div class="content">
        <div class="ts-header is-large">我的檔案</div>
    </div>
</div>

組合應用

展開選單

搭配樣式切換模組與選單可以在行動裝置上提供一個可展開的額外選單。

<div class="ts-app-topbar">
    <div class="start">
        <a class="item" data-toggle="menu:u-hidden">
            <span class="ts-icon is-bars-icon"></span>
        </a>
        <div class="item is-text">電子信箱</div>
    </div>
    <div class="content" data-name="menu">
        <div class="ts-input is-start-icon u-dark">
            <span class="ts-icon is-magnifying-glass-icon"></span>
            <input type="text" placeholder="搜尋信件…">
        </div>
        <div class="ts-space is-small"></div>
        <div class="ts-menu is-separated is-start-icon u-dark">
            <a class="item">
                <span class="ts-icon is-inbox-icon"></span>
                收件匣
            </a>
            <a class="item">
                <span class="ts-icon is-bookmark-icon"></span>
                重要郵件
            </a>
            <a class="item">
                <span class="ts-icon is-circle-exclamation-icon"></span>
                垃圾郵件
            </a>
        </div>
    </div>
</div>

功能選單

搭配選單模組與彈出式選單讓尾端的額外功能選單起作用。

<div class="ts-app-topbar">
    <div class="start">
        <div class="item is-text">遊戲存檔修改器</div>
    </div>
    <div class="end">
        <button class="item" data-dropdown="dropdown">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </button>
    </div>
</div>
<div class="ts-dropdown" data-name="dropdown" data-position="bottom-end">
    <button class="item">檢查最新版本</button>
    <button class="item">使用說明</button>
    <button class="item">關於版本</button>
</div>