MenuAPI
React Menu 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
Demos
Import
import Menu from '@mui/material/Menu';
// or
import { Menu } from '@mui/material';請閱讀這份關於最小化套件大小的指南，以瞭解差異。
Popover 元件的 Props 也可使用。
| Name | Type | Default | Description |
|---|---|---|---|
| open* | bool | - | 若為 |
| anchorEl | HTML 元素 | func | - | HTML 元素或返回 HTML 元素的函式。它用於設定選單的位置。 |
| autoFocus | bool | true | 若為 |
| children | node | - | 選單內容，通常為 |
| classes | object | - | 覆寫或擴充套用至元件的樣式。 請參閱下方CSS 類別 API 以取得更多詳細資訊。 |
| disableAutoFocusItem | bool | false | 當開啟選單時，不會聚焦於活動項目，而是聚焦於 |
| MenuListProps | object | {} | 套用至 |
| onClose | func | - | 當元件請求關閉時觸發的回呼函式。 簽名： function(event: object, reason: string) => void
|
| PopoverClasses | object | - | 套用至 |
| slotProps | { backdrop?: func | object, list?: func | object, paper?: func | object, root?: func | object, transition?: func | object } | {} | 用於每個 slot 內部的 props。 |
| slots | { backdrop?: elementType, list?: elementType, paper?: elementType, root?: elementType, transition?: elementType } | {} | 用於每個 slot 內部的元件。 |
| sx | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面 以取得更多詳細資訊。 |
| transitionDuration | 'auto' | number | { appear?: number, enter?: number, exit?: number } | 'auto' | 過渡效果的持續時間，以 |
| TransitionProps | object | {} | 套用至過渡效果元素的 Props。預設情況下，元素基於此 |
| variant | 'menu' | 'selectedMenu' | 'selectedMenu' | 要使用的變體。使用 |
ref 會轉發到根元素。繼承
雖然上面沒有明確的文件說明，但 Popover 元件的 props 也可在 Menu 中使用。您可以利用此優勢來鎖定巢狀元件。
| Slot 名稱 | 類別名稱 | 預設元件 | Description |
|---|---|---|---|
| root | .MuiMenu-root | Modal | 用於 popper 的元件。 |
| paper | .MuiMenu-paper | Paper | 用於 paper 的元件。 |
| list | .MuiMenu-list | MenuList | 用於 list 的元件。 |
| transition | Grow | 用於 transition slot 的元件。 | |
| backdrop | Backdrop | 用於 backdrop slot 的元件。 |
原始碼
如果您在本頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。