頂部列 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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

概要

通常被擺放在應用程式的最上方，可與格局劃分一起使用。

結構

區塊

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

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

文字項目

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

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

內容

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

<div class="ts-app-topbar">
    <div class="start">
        <button class="item">
            <span class="ts-icon is-arrow-left-icon"></span>
        </button>
    </div>
    <div class="end">
        <button class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </button>
        <button class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </button>
    </div>
    <div class="content">
        <div class="ts-header is-large">我的檔案</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" id="dropdown" data-position="bottom-end">
    <button class="item">檢查最新版本</button>
    <button class="item">使用說明</button>
    <button class="item">關於版本</button>
</div>