菜单

下拉菜单组件为最终用户在临时表面上提供选项列表。

import { Dropdown } from '@mui/base/Dropdown';
// or
import { Dropdown } from '@mui/base';

名称	类型	描述
defaultOpen	bool	如果 `true`，则下拉菜单初始为打开状态。
onOpenChange	func	当组件请求打开或关闭时触发的回调。
open	bool	允许控制下拉菜单是否打开。这是 `defaultOpen` 的受控 counterpart。

该组件无法持有 ref。

import { Menu } from '@mui/base/Menu';
// or
import { Menu } from '@mui/base';

原生组件的 Props 也可用。

名称	类型	默认	描述
actions	ref	-	一个带有命令式操作的 ref，可以在菜单上执行这些操作。
anchor	HTML 元素 \| object \| func	-	菜单定位所基于的元素。
onItemsChange	func	-	当菜单中显示的 items 更改时调用的函数。
slotProps	{ listbox?: func \| object, root?: func \| object }	{}	用于 Menu 内部每个 slot 的 props。
slots	{ listbox?: elementType, root?: elementType }	{}	用于 Menu 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参见下方的 Slots API。

ref 被转发到根元素。

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称	类名	默认组件	描述
root	.base-Menu-root	`'div'`	渲染弹出元素的组件。
listbox	.base-Menu-listbox	`'ul'`	渲染 listbox 的组件。

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用于组件的 slots。

类名	描述
.base--expanded	如果 `open={true}`，则应用于根元素的状态类。

import { MenuButton } from '@mui/base/MenuButton';
// or
import { MenuButton } from '@mui/base';

原生组件的 Props 也可用。

名称	类型	默认	描述
className	string	-	应用于根元素的类名。
disabled	bool	false	如果 `true`，则组件被禁用。
focusableWhenDisabled	bool	false	如果 `true`，则允许禁用的按钮接收焦点。
label	string	-	按钮的标签
slotProps	{ root?: func \| object }	{}	用于 MenuButton 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。
slots	{ root?: elementType }	{}	用于 MenuButton 内部每个 slot 的 props。有关更多详细信息，请参见下方的 Slots API。

ref 被转发到根元素。

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称	类名	默认组件	描述
root	.base-MenuButton-root	`'button'`	渲染根元素的组件。

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用于组件的 slots。

类名	描述
.base--active	如果 `active={true}`，则应用于根元素的状态类。
.base--disabled	如果 `disabled={true}`，则应用于根元素的状态类。
.base--expanded	如果关联的菜单打开，则应用于根元素的状态类。

import { MenuItem } from '@mui/base/MenuItem';
// or
import { MenuItem } from '@mui/base';

原生组件的 Props 也可用。

名称	类型	默认	描述
disabled	bool	false	如果 `true`，则菜单项将被禁用。
disableFocusOnHover	bool	false	如果 `true`，则当鼠标移动到菜单项上方时，该菜单项不会接收焦点。
label	string	-	菜单项内容的文本表示形式。用于键盘文本导航匹配。
slotProps	{ root?: func \| object }	{}	用于 MenuItem 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 MenuItem 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参见下方的 Slots API。

ref 被转发到根元素。

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称	类名	默认组件	描述
root	.base-MenuItem-root	`'li'`	渲染根元素的组件。

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用于组件的 slots。

类名	描述
.base--disabled	如果 `disabled={true}`，则应用于根 `button` 元素的状态类。
.base--focusVisible	如果 `focusVisible={true}`，则应用于根 `button` 元素的状态类。

Menu API