台灣正體

頂部列

應用程式最上方的功能列。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
應用程式
<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>
文字項目

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

檢視 PDF 文件
<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:has-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 has-dark">
            <span class="ts-icon is-magnifying-glass-icon"></span>
            <input type="text" placeholder="搜尋信件…">
        </div>
        <div class="ts-menu is-separated is-start-icon has-dark has-top-spaced-small">
            <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>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標