選單

下拉選單元件在臨時介面上為終端使用者提供選項列表。

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

閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	預設	描述
componentName	字串	'useDropdown'	使用 useDropdown 的元件名稱。用於除錯目的。
defaultOpen	布林值	-	如果為 `true`，下拉選單會初始開啟。
onOpenChange	(event: React.MouseEvent \| React.KeyboardEvent \| React.FocusEvent \| null, open: boolean) => void	-	當元件請求開啟或關閉時觸發的回呼。
open	布林值	-	允許控制下拉選單是否開啟。這是 `defaultOpen` 的受控 counterpart。

名稱	類型	描述
contextValue	DropdownContextValue	要傳遞到 DropdownContext provider 的值。
open	布林值	如果為 `true`，下拉選單會開啟。

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

閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	預設	描述
autoFocus	布林值	true	如果為 `true` (預設值)，將會 focus 在高亮項目上。如果您將此 prop 設定為 `false`，焦點將不會移動到 Menu 元件內部。這會對 accessibility 產生嚴重影響，僅在您以其他方式管理焦點時才應考慮。
componentName	字串	'useMenu'	使用 useMenu 的元件名稱。用於除錯目的。
disabledItemsFocusable	布林值	true	如果為 `true`，將可以高亮顯示 disabled 項目。
disableListWrap	布林值	false	如果為 `true`，當使用方向鍵時，高亮顯示將不會在列表周圍循環。
id	字串	-	選單的 id。如果未提供，將會自動產生。
listboxRef	React.Ref<Element>	-	選單 listbox 節點的 ref。
onItemsChange	(items: string[]) => void	-	當選單項目變更時觸發的回呼。

名稱	類型	描述
contextValue	MenuProviderValue	要傳遞到 MenuProvider 的值。
dispatch	(action: ListAction<string>) => void	選單元件的 Action dispatcher。允許以程式方式控制選單。
getListboxProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuListboxSlotProps	listbox slot props 的 Resolver。
highlightedValue	string \| null	選單 listbox 中高亮顯示的選項。
listboxRef	React.RefCallback<Element> \| null	選單 listbox 節點的 ref。
menuItems	Map<string, MenuItemMetadata>	選單 listbox 中的項目。
open	布林值	如果為 `true`，選單會開啟。
triggerElement	HTMLElement \| null	觸發選單可見性的元件。

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

閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	描述
active	布林值	如果為 `true`，元件是 active (已按下) 狀態。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuButtonRootSlotProps<ExternalProps>	root slot props 的 Resolver。
open	布林值
rootRef	React.RefCallback<Element> \| null	根元件的 ref。

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

閱讀關於最小化套件大小的指南，以了解它們之間的差異。

名稱	類型	預設	描述
rootRef*	React.Ref<Element>	-
disabled	布林值	-
disableFocusOnHover	布林值	false	如果為 `true`，當滑鼠移動到選單項目上方時，該項目不會接收焦點。
id	字串	-
label	字串	-
onClick	React.MouseEventHandler<any>	-

名稱	類型	描述
disabled	布林值	如果為 `true`，元件會被 disabled。
focusVisible	布林值	如果為 `true`，元件正使用鍵盤 focus。
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuItemRootSlotProps<ExternalProps>	root slot props 的 Resolver。
highlighted	布林值	如果為 `true`，元件正被高亮顯示。
index	數字	選單中項目的從 0 開始的 index。
rootRef	React.RefCallback<Element> \| null	元件根 DOM 元素的 ref。
totalItemCount	數字	選單中項目的總數。

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

閱讀關於最小化套件大小的指南，以了解它們之間的差異。

此 hook 不接受任何輸入參數。

名稱	類型	描述

useMenu API