Dropdown Menu 下拉選單
概述
下拉選單是一種允許使用者從一組選項中選擇一個或多個選項的元件。
使用時機
下拉選單常用於以下情境：
- 有限選項：當選項數量有限且選項之間有差異明顯時。
- 節省空間：當介面空間有限，無法容納所有選項時，以列表形式清晰地呈現所有可選項目。
- 需要搜尋：當選項數量較多，使用者需要快速找到特定選項時。
- 多選需求：當使用者需要選擇多個選項時。
使用規範
當您取用下拉選單元件進行設計時，應考慮以下原則：
- 標籤：提供明確的標籤，說明下拉選單的用途。
- 選項排序：按照邏輯順序或使用頻率對選項進行排序。
- 預設選項（選擇性）：根據使用情境，設定一個合理的預設選項。
- 選項分組（選擇性）：如果選項較多，可以將相關選項分組，並使用分隔線或標題區分。
- 搜尋功能（選擇性）：當選項數量較多時，提供搜尋功能，讓使用者可以快速找到目標選項。
- 多選功能（選擇性）：如果需要使用者選擇多個選項，提供多選功能，並清晰地顯示已選中的選項。
- 其他：若選擇的選項少於三項，請使用單選按鈕代替。
設計範例
基本下拉選單 (Basic Dropdown Menu)
![]()
允許使用者選擇單一選項。
- 欄位 (Field)：不論下拉選單展開或收合時都持續存在的區域。
- 目錄 (Menu)：一組可供選擇的選項列表，以展開狀態顯示。
- 選項 (Option)：使用者可選的選項之一，與其他選項一起顯示在選單中。
多選下拉選單 (Multi-select Dropdown Menu)
![]()
允許使用者選擇多個選項。
- 欄位 (Field)：不論下拉選單展開或收合時都持續存在的區域。
- 目錄 (Menu)：一組可供選擇的選項列表，以展開狀態顯示。
- 選項 (Option)：使用者可選的選項之一，與其他選項一起顯示在選單中。
- 父級勾選框 (Parent Checkbox)：用於在多選下拉選單中選取選單內的所有選項。
- 勾選框 (Checkbox)：
