菜单

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

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

名称	类型	默认值	描述
componentName	string	'useDropdown'	使用 useDropdown 的组件名称。用于调试目的。
defaultOpen	boolean	-	如果为 `true`，则下拉菜单初始为打开状态。
onOpenChange	(event: React.MouseEvent \| React.KeyboardEvent \| React.FocusEvent \| null, open: boolean) => void	-	当组件请求打开或关闭时触发的回调。
open	boolean	-	允许控制下拉菜单是否打开。这是 `defaultOpen` 的受控 counterpart。

名称	类型	描述
contextValue	DropdownContextValue	要传递到 DropdownContext 提供程序中的值。
open	boolean	如果为 `true`，则下拉菜单为打开状态。

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

名称	类型	默认值	描述
autoFocus	boolean	true	如果为 `true`（默认），将聚焦高亮的项目。如果您将此属性设置为 `false`，则焦点不会移动到 Menu 组件内部。这具有严重的辅助功能影响，只有在您以其他方式管理焦点时才应考虑。
componentName	string	'useMenu'	使用 useMenu 的组件名称。用于调试目的。
disabledItemsFocusable	boolean	true	如果为 `true`，则可以高亮禁用项目。
disableListWrap	boolean	false	如果为 `true`，则在使用箭头键时，高亮不会在列表中循环。
id	string	-	菜单的 ID。如果未提供，则将生成。
listboxRef	React.Ref<Element>	-	菜单列表框节点的 ref。
onItemsChange	(items: string[]) => void	-	当菜单项更改时触发的回调。

名称	类型	描述
contextValue	MenuProviderValue	要传递到 MenuProvider 中的值。
dispatch	(action: ListAction<string>) => void	菜单组件的操作分发器。允许以编程方式控制菜单。
getListboxProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuListboxSlotProps	列表框插槽属性的解析器。
highlightedValue	string \| null	菜单列表框中高亮显示的选项。
listboxRef	React.RefCallback<Element> \| null	菜单列表框节点的 ref。
menuItems	Map<string, MenuItemMetadata>	菜单列表框中的项目。
open	boolean	如果为 `true`，则菜单为打开状态。
triggerElement	HTMLElement \| null	触发菜单可见性的元素。

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

名称	类型	描述
active	boolean	如果为 `true`，则组件处于活动状态（按下）。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuButtonRootSlotProps<ExternalProps>	根插槽属性的解析器。
open	boolean
rootRef	React.RefCallback<Element> \| null	根元素的 ref。

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

名称	类型	默认值	描述
rootRef*	React.Ref<Element>	-
disabled	boolean	-
disableFocusOnHover	boolean	false	如果为 `true`，则当鼠标移动到菜单项上时，菜单项不会接收焦点。
id	string	-
label	string	-
onClick	React.MouseEventHandler<any>	-

名称	类型	描述
disabled	boolean	如果为 `true`，则组件被禁用。
focusVisible	boolean	如果为 `true`，则组件正在使用键盘聚焦。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuItemRootSlotProps<ExternalProps>	根插槽属性的解析器。
highlighted	boolean	如果为 `true`，则组件正在被高亮显示。
index	number	菜单中项目的从 0 开始的索引。
rootRef	React.RefCallback<Element> \| null	组件根 DOM 元素的 ref。
totalItemCount	number	菜单中项目的总数。

import { useMenuItemContextStabilizer } from '@mui/base/useMenuItem';
// or
import { useMenuItemContextStabilizer } from '@mui/base';

此 Hook 不接受任何输入参数。

名称	类型	描述

useMenu API