Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsAction Sheet
可以是延伸功能的選單，也可以是單一功能的選項，快速地提供使用者不同的選擇
此元件分為 iOS 及 Android 兩種 UI 形式，細節可瀏覽下方介紹資訊。
⚡️ 相關資源：
Component
Figma File
UI Spec (暫無)
Anatomy
解構
➊ Leading item
當該選項需要有圖像或是 icon 時，會有左側物件來搭配解釋該選項內容，適用於 functional menu (可分三種樣式，詳見運用情境)
➋ Content
用於呈現該選單的功能名稱，通常以簡短文字來呈現
➌ Control Optional
當該選項為控制功能選項時，會顯示右側的控制元件
➍ Setting value
顯示目前用戶套用的設定值
➎ Action
用來關閉選單
Variants（Types）
變形（類型）
以下的範例，皆以 iOS 現況截圖演示，在 Android 上會有些微差異，但大多符合通則。
➊ Functional menu
用於完整呈現 聲音內容(music/ Podcast) 的進階功能
選單內容共有三種運用的樣式：
a. with picture
- 用於 歌手/ 專輯/ Podcast頻道 - 此樣式擁有圖片、標題、內容名稱 - 圖片：可分為人物/封面二種類型，點了之後會去到該對應的頁面 - 標題：標示此項目的內容類型。例如：歌手、專輯、Podcast 節目 - 內容名稱：顯示此項目的內容名稱。例如：歌手名稱、專輯名稱、Podcast 節目名稱
b. with icon 用於功能，搭配 icon 做輔助說明，通常會是執行一個動作、調整設定值
c. toggle button 可直接在選單內開啟跟關閉，方便使用者操作
➋ Optional menu
用於呈現設定選項的選單
選單內容共有二種運用的樣式：
運用的樣式如下：
a. title 用簡短文字陳述這個選單對應的功能名稱
b. settings value 用來顯示有哪些設定選項，且會在目前的設定值右側顯示藍色勾勾
Behaviors
行為
- 點擊 action sheet 以外的區域，可關閉 action sheet
- iOS 壓著 action sheet 往下滑可關閉 action sheet
Usage Guidelines
使用規範
1. 裝置
➊ Mobile
依據各平台特性，採用該平台原生的樣式來設計
➋ iPad/ Tablet
依據各平台特性，採用該平台原生的樣式來設計
2. 應用情境
- 請勿在 Functional menu 中使用無 icon 或左側圖片的選項
- 「不需要」在 Functional menu 中使用標題
- 在 iPad 中請勿將 action sheet 放在畫面正中間，需跟著 […]
- 在 tablet 中請勿將 action sheet 放在畫面角落，請置於正中間
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
February 13, 2023 | 1.13 | ・新增 Action Sheet 草稿 | Action Sheet |  Paris Han |
October 16, 2023 | 1.35 | ・調整雙平台 UI 介紹內容，補充 Android 示意圖及說明文字 | Action Sheet | Paris Han |