MenuListAPI

React MenuList 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

import MenuList from '@mui/material/MenuList';
// or
import { MenuList } from '@mui/material';

一個永久顯示的選單，遵循https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/。它被公開是為了幫助自訂Menu元件，如果您單獨使用它，您需要手動將焦點移入元件中。一旦焦點被放置在元件內部，它就可以完全透過鍵盤操作。

List 元件的 props 也可使用，List。

名稱	類型	預設值	描述
autoFocus	bool	false	若為 `true`，將聚焦於 `[role="menu"]` 容器並移入 tab 順序。
autoFocusItem	bool	false	若為 `true`，如果 `variant="menu"` 將聚焦於第一個 menuitem，如果 `variant="selectedMenu"` 則聚焦於選定的項目。
children	node	-	MenuList 內容，通常為 `MenuItem`s。
disabledItemsFocusable	bool	false	若為 `true`，將允許聚焦於停用的項目。
disableListWrap	bool	false	若為 `true`，選單項目將不會環繞焦點。
variant	'menu' \| 'selectedMenu'	'selectedMenu'	要使用的 variant。使用 `menu` 以防止選定的項目影響初始焦點以及相對於錨點元素的垂直對齊。

ref 被轉發到根元素。

雖然上面沒有明確的文件說明，但 List 元件的 props 也可在 MenuList 中使用。您可以利用這一點來鎖定巢狀元件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。

類別名稱	規則名稱	描述
.MuiMenuList-dense	dense	如果 dense，則樣式會應用於根元素。
.MuiMenuList-padding	padding	除非 `disablePadding={true}`，否則樣式會應用於根元素。
.MuiMenuList-root	root	樣式會應用於根元素。
.MuiMenuList-subheader	subheader	如果提供了 `subheader`，則樣式會應用於根元素。

您可以使用以下自訂選項之一覆寫元件的樣式

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。