導航列
近似於分頁籤但作為應用程式的功能切換列。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-segment">
    <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 class="ts-app-navbar">
    <a class="item">
        <div class="ts-icon is-magnifying-glass-icon"></div>
        <div class="label">搜尋</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-vials-icon"></div>
        <div class="label">實驗區</div>
    </a>
    <a class="item">
        <div class="ts-icon is-atom-icon"></div>
        <div class="label">原子測試</div>
    </a>
</div>
狀態
啟用的

表現出目前頁面正處於的位置項目。

<div class="ts-app-navbar">
    <a class="item">
        <div class="ts-icon is-star-icon"></div>
        <div class="label">常用聯絡人</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-clock-icon"></div>
        <div class="label">近期通話</div>
    </a>
    <a class="item">
        <div class="ts-icon is-users-icon"></div>
        <div class="label">聯絡人</div>
    </a>
</div>
停用的

淡化某個項目讓使用者無法與其互動。

<div class="ts-app-navbar is-indicated">
    <a class="item">
        <div class="ts-icon is-newspaper-icon"></div>
        <div class="label">刊登啟示</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-list-check-icon"></div>
        <div class="label">未完成項目</div>
    </a>
    <a class="item is-disabled">
        <div class="ts-icon is-handshake-angle-icon"></div>
        <div class="label">請求協助</div>
    </a>
</div>
外觀
標記的

令啟用的項目以較醒目的方式呈現,而這會讓沒被啟用的項目以正常方式呈現而不會被淡化。

<div class="ts-app-navbar is-indicated">
    <a class="item">
        <div class="ts-icon is-shoe-prints-icon"></div>
        <div class="label">步數</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-stopwatch-icon"></div>
        <div class="label">活動分鐘</div>
    </a>
    <a class="item">
        <div class="ts-icon is-heart-icon"></div>
        <div class="label">心律</div>
    </a>
</div>
無標籤

在這個模式下,所有沒被啟用的項目其標籤都會被隱藏。這可以有效地減短導航列的寬度。

<div class="ts-app-navbar is-unlabeled">
    <a class="item">
        <div class="ts-icon is-image-icon"></div>
        <div class="label">相片</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-magnifying-glass-icon"></div>
        <div class="label">搜尋</div>
    </a>
    <a class="item">
        <div class="ts-icon is-users-icon"></div>
        <div class="label">共享</div>
    </a>
    <a class="item">
        <div class="ts-icon is-box-archive-icon"></div>
        <div class="label">彙整</div>
    </a>
</div>
垂直的

以上下垂直的方式陳列項目。

<div class="ts-app-navbar is-vertical is-indicated">
    <a class="item">
        <div class="ts-icon is-boxes-stacked-icon"></div>
        <div class="label">服務結構</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-database-icon"></div>
        <div class="label">SQL 指令</div>
    </a>
    <a class="item">
        <div class="ts-icon is-scroll-icon"></div>
        <div class="label">常用片段</div>
    </a>
</div>
流動

導航列的寬度可以與父容器相同。

<div class="ts-app-navbar is-fluid">
    <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-flag-icon"></div>
        <div class="label">粉絲專頁</div>
    </a>
    <a class="item">
        <div class="ts-icon is-bell-icon"></div>
        <div class="label">通知</div>
    </a>
</div>
較密的

變更元件的內距,令元素之間看起來更密集。

<div class="ts-app-navbar is-dense is-indicated">
    <a class="item">
        <div class="ts-icon is-envelope-icon"></div>
        <div class="label">信件</div>
    </a>
    <a class="item is-active">
        <div class="ts-icon is-comment-icon"></div>
        <div class="label">聊天</div>
    </a>
    <a class="item">
        <div class="ts-icon is-users-icon"></div>
        <div class="label">社群</div>
    </a>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n