Components

Action Sheet

Badge

Button

Cards

Dialog

Fixed Banner

Floating message

Image

Input field

Message Block

Status

Tab

Tag

Tooltips

Bottom Navigation

APP內最高層級的導航元件，顯示於畫面最下方的常駐主功能選單

⚡️ 相關資源：

Components Figma File

Anatomy

解構

1. Icon 功能圖示
2. Function Name 功能名稱
3. Progress bar Optional 示意資料同步中的進度條

State

狀態

❶ 基本形式

Bottom Navigation 包含五項固定的主要功能，當點擊各項目時，icon 及文字會轉換成藍色，且畫面呈現對應的內容

❷ 資料更新形式

當用戶重新安裝 App 時，在原本『 我的 』icon 位置上會自動出現一個小進度條，示意資料正在下載串連中，待資料讀取完畢後，進度條會消失並回復成基本形式。

Behaviors

行為

• 當用戶點擊後，會 focus 在當下所點擊的項目，同時顯示 active 的藍色 icon 及文字狀態
• 當點擊第二個項目後，會釋放第一個點擊項目，並將其 icon 及文字轉換回深灰色的 default 狀態，同時第二個項目變成藍色的 active 狀態
• 固定存在於各層級頁面中，除了現正播放頁、一起聽聊天室、通知頁以及外開 Web view 頁面
• IOS only：重複點擊 focused 的 icon 時，頁面會自動滑到該頁的最上方

Usage Guidelines

使用規範

1. 不可以同時顯示一個以上的 active 狀態

2. Active 狀態的 icon 為實心填色的版本，不可直接使用 default 狀態的線框 icon

Changelog

On This Page

• Bottom Navigation
• Anatomy
• State
• ❶ 基本形式
• ❷ 資料更新形式
• Behaviors
• Usage Guidelines
• Changelog