選單

選單在暫時性的表面上顯示選項列表。

介紹

Joy UI 提供五個與選單相關的元件

• 選單按鈕 - 一個開啟選單的按鈕。它重複使用了來自 Button 的樣式。
• 選單 - 一個用於包裝選單項目的列表框彈出視窗，它重複使用了來自 List 的樣式。
• 選單項目 - 一個選單項目，它重複使用了來自 ListItemButton 的樣式。
• 選單列表 - 一個獨立的列表框，用於組合使用。它也重複使用了來自 List 的樣式。
• 下拉選單 - 最外層的元件，將按鈕與選單連接起來。它僅提供上下文，不渲染任何內容。

元件

安裝完成後，您可以使用以下基本元素開始建構此元件

import Menu from '@mui/joy/Menu';
import MenuButton from '@mui/joy/MenuButton';
import MenuItem from '@mui/joy/MenuItem';
import Dropdown from '@mui/joy/Dropdown';

export default function MyApp() {
  return (
    <Dropdown>
      <MenuButton>Actions</MenuButton>
      <Menu>
        <MenuItem>Add item</MenuItem>
      </Menu>
    </Dropdown>
  );
}

基本用法

將 Menu 和 Menu Button 都放在 Dropdown 元件內。這會將它們連接在一起。Menu Button 將切換選單的顯示，並作為 Menu 彈出視窗的錨點。

預設情況下，選單的基本版本會在錨點元素上方開啟。您可以透過特定的定位 props 來更改此行為。

當靠近螢幕邊緣時，選單會垂直重新對齊，以確保所有選單項目都完全可見。選擇選項應立即執行，理想情況下，應提交選項並關閉選單。

尺寸

選單元件預設提供三種尺寸：sm、md（預設值）和 lg。

當為 Menu 元件指定尺寸時，其內部的選單項目將會繼承該值。

已選取

使用 selected prop 來表示 MenuItem 是否被選取。

選單項目使用與 ListItemButton 相同的樣式。

圖示按鈕選單

若要使用 IconButton 元件作為選單按鈕，請將其傳遞給 MenuButton 元件的 root slot。

使用 slotProps 將 props 傳遞給 IconButton 元件。

定位選單

Menu 是基於 MUI Base Popper 元件，它公開了一些placement props。例如，這是您如何在錨點按鈕的底端顯示選單的方式。

群組選單

控制開啟狀態

預設情況下，選單的開啟/關閉狀態由 Dropdown 元件內部管理。若要從外部以程式方式控制它，請如下所示套用 Dropdown 的 open 和 onOpenChange props

MenuList 組合

若要完全控制 DOM 結構，請使用 MenuList 元件。您可以使用它來組合任何類似彈出視窗的元件。此元件的主要職責是處理焦點狀態。

或顯示沒有彈出視窗的選單

除錯

若要保持列表框開啟以檢查元素，請從 Chrome DevTool Rendering 標籤啟用「模擬焦點頁面」選項。您也可以使用命令選單並搜尋它來存取此選項。

常見範例

應用程式選單

此範例複製了一個包含其他應用程式連結的選單。

選單列

此範例複製了 macOS 上的應用程式選單列。它支援滑鼠和鍵盤在選單項目之間導航。

側邊導航圖示

此範例在儀表板應用程式中非常常見，其中側邊導航縮減為圖示，並且選單透過懸停它們來觸發。

無樣式

使用 Base UI Menu 以完全掌控元件的設計，無需覆寫 Material UI 或 Joy UI 的樣式。此無樣式版本的元件是高度自訂且套件大小較小的理想選擇。

API

請參閱以下文件，以取得此處提及之元件可用的所有 props 和 classes 的完整參考。

• <Menu />
• <MenuButton />
• <MenuItem />
• <MenuList />