導航列 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-app-navbar is-fluid">
    <a class="item">
        <span class="ts-icon is-user-icon"></span>
        <div class="label">使用者</div>
    </a>
    <a class="item">
        <span class="ts-icon is-house-icon"></span>
        <div class="label">首頁</div>
    </a>
    <a class="item is-active">
        <span class="ts-icon is-newspaper-icon"></span>
        <div class="label">新聞</div>
    </a>
</div>

概要

通常擺放在畫面下方，如果項目過多則可以改用側邊導覽。

使用此元件時必須要有一個被啟用的項目，沒有被啟用的項目會淡化呈現。

結構

標籤

圖示下方可以擺放標籤，但僅能是單行文字。

<div class="ts-app-navbar">
    <a class="item">
        <span class="ts-icon is-magnifying-glass-icon"></span>
        <div class="label">搜尋</div>
    </a>
    <a class="item is-active">
        <span class="ts-icon is-vials-icon"></span>
        <div class="label">實驗區</div>
    </a>
    <a class="item">
        <span class="ts-icon is-atom-icon"></span>
        <div class="label">原子測試</div>
    </a>
</div>

狀態

啟用的

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

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

停用的

使項目呈現無法互動、點擊的模樣。若項目是超連結，則需套用 .is-disabled 樣式。

<div class="ts-app-navbar">
    <a class="item">
        <span class="ts-icon is-newspaper-icon"></span>
        <div class="label">刊登啟示</div>
    </a>
    <button class="item" disabled>
        <span class="ts-icon is-list-check-icon"></span>
        <div class="label">未完成項目</div>
    </button>
    <a class="item is-disabled">
        <span class="ts-icon is-handshake-angle-icon"></span>
        <div class="label">請求協助</div>
    </a>
</div>

外觀

垂直的

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

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

流動

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

<div class="ts-app-navbar is-fluid">
    <a class="item">
        <span class="ts-icon is-house-icon"></span>
        <div class="label">首頁</div>
    </a>
    <a class="item is-active">
        <span class="ts-icon is-flag-icon"></span>
        <div class="label">粉絲專頁</div>
    </a>
    <a class="item">
        <span class="ts-icon is-bell-icon"></span>
        <div class="label">通知</div>
    </a>
</div>

在尋找相似的元件嗎？

分頁籤