選單

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

選單會在暫時的表面上顯示選項列表。當使用者與按鈕或其他控制項互動時，選單會出現。

簡介

選單是使用相關元件的集合來實作

Menu：選單的容器/表面。
Menu Item：使用者從選單中選擇的選項。
Menu List (選用)：Menu Item 的替代可組合容器—詳情請參閱與 Menu List 的組合。

預設情況下，基本選單會在錨點元素上方開啟（此選項可以透過 props 變更）。當靠近螢幕邊緣時，基本選單會垂直重新對齊，以確保所有選單項目都完全可見。

您應該設定元件，以便選擇選項後立即確認並關閉選單，如下面的示範所示。

在桌面視口中，會增加內距，以便為選單提供更多空間。

對於具有長列表和長文字的選單，您可以使用 dense 屬性來減少內距和文字大小。

如果用於項目選取，當開啟時，簡單選單會將初始焦點放在選取的選單項目上。目前選取的選單項目是使用 selected 屬性（來自 ListItem）設定的。若要在不影響初始焦點的情況下使用選取的選單項目，請將 variant 屬性設定為 "menu"。

由於 Menu 元件使用 Popover 元件來定位自身，因此您可以使用相同的定位屬性來定位它。例如，您可以將選單顯示在錨點上方

Menu 元件在內部使用 Popover 元件。但是，您可能想要使用不同的定位策略，或是不希望阻止捲動等。

Menu List 元件可讓您為這些用例組合自己的選單—其主要目的是處理焦點。請參閱下面的示範，以取得使用 Menu List 並將 Menu 的預設 Popover 替換為 Popper 元件的組合範例

Menu 內容可以與其他元件（例如 Avatar）混合使用。

聯絡人

個人資料

自訂

以下是自訂元件的範例。您可以在覆寫文件頁面中瞭解更多關於此內容。

MenuItem 是 ListItem 的包裝器，具有一些額外的樣式。您可以將相同的列表組合功能與 MenuItem 元件一起使用

🎨 如果您正在尋找靈感，可以查看 MUI Treasury 的自訂範例。

如果選單的高度阻止顯示所有選單項目，則選單可以在內部捲動。

限制

有一個 flexbox 錯誤，會阻止 text-overflow: ellipsis 在 flexbox 版面配置中運作。您可以使用具有 noWrap 的 Typography 元件來解決此問題

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

使用 ListSubheader 元件顯示類別。

補充專案

對於更進階的用例，您或許可以利用

npm downloads

套件 material-ui-popup-state 在大多數情況下會為您處理選單狀態。

<PopupState variant="popover" popupId="demo-popup-menu">
  {(popupState) => (
    <React.Fragment>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Dashboard
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Profile</MenuItem>
        <MenuItem onClick={popupState.close}>My account</MenuItem>
        <MenuItem onClick={popupState.close}>Logout</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

<PopupState variant="popover" popupId="demo-popup-menu">
  {(popupState) => (
    <React.Fragment>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Dashboard
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Profile</MenuItem>
        <MenuItem onClick={popupState.close}>My account</MenuItem>
        <MenuItem onClick={popupState.close}>Logout</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

按下 Enter 鍵開始編輯

無樣式

使用 Base UI Menu 完全擁有元件設計的所有權，無需覆寫 Material UI 或 Joy UI 樣式。此元件的無樣式版本是大量自訂和更小套件大小的理想選擇。

API

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

選單

簡介

基本選單

圖示選單

密集選單

選取的選單

定位選單

與 Menu List 的組合

帳戶選單

自訂

最大高度選單

限制

變更轉場效果

情境選單

分組選單

補充專案

無樣式

API