範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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>在尋找相似的元件嗎？
