MenuAPI
React Menu 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。
演示
Import
import Menu from '@mui/material/Menu';
// or
import { Menu } from '@mui/material';阅读关于最小化 bundle 大小的指南，了解它们之间的区别。
Popover 组件的 Props 也可用。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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 | - | 允许定义系统 overrides 以及其他 CSS 样式的系统 prop。 有关更多详细信息，请参阅`sx` 页面。 |
| transitionDuration | 'auto' | number | { appear?: number, enter?: number, exit?: number } | 'auto' | 过渡的持续时间，以 |
| TransitionProps | object | {} | 应用于 transition 元素的 Props。 默认情况下，该元素基于此 |
| variant | 'menu' | 'selectedMenu' | 'selectedMenu' | 要使用的 variant。使用 |
ref 被转发到根元素。继承
虽然上面没有明确记录，但 Popover 组件的 props 也可在 Menu 中使用。 您可以利用这一点来定位嵌套组件。
| Slot 名称 | 类名 | 默认组件 | 描述 |
|---|---|---|---|
| root | .MuiMenu-root | Modal | 用于 popper 的组件。 |
| paper | .MuiMenu-paper | Paper | 用于 paper 的组件。 |
| list | .MuiMenu-list | MenuList | 用于 list 的组件。 |
| transition | Grow | 用于 transition slot 的组件。 | |
| backdrop | Backdrop | 用于 backdrop slot 的组件。 |
源代码
如果您在此页面中没有找到所需的信息，请考虑查看组件的实现以获取更多详细信息。