選單

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

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

名稱	類型	描述
defaultOpen	bool	如果為 `true`，則下拉式選單預設為開啟。
onOpenChange	func	當元件請求開啟或關閉時觸發的回呼函數。
open	bool	允許控制下拉式選單是否開啟。這是 `defaultOpen` 的受控對應項。

元件無法持有 ref。

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

原生元件的 Props 也可用。

名稱	類型	預設	描述
actions	ref	-	一個帶有命令式操作的 ref，可用於在選單上執行操作。
anchor	HTML 元素 \| object \| func	-	選單定位所依據的元素。
onItemsChange	func	-	當選單中顯示的項目變更時呼叫的函數。
slotProps	{ listbox?: func \| object, root?: func \| object }	{}	用於選單內部每個 slot 的 props。
slots	{ listbox?: elementType, root?: elementType }	{}	用於選單內部每個 slot 的元件。可以是 HTML 元素字串或元件。請參閱下方 Slots API 以了解更多詳細資訊。

ref 會轉發到 root 元素。

若要了解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-Menu-root	`'div'`	呈現彈出式元素的元件。
listbox	.base-Menu-listbox	`'ul'`	呈現 listbox 的元件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱	描述
.base--expanded	如果 `open={true}`，則套用至 root 元素的狀態類別。

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

原生元件的 Props 也可用。

名稱	類型	預設	描述
className	string	-	套用至 root 元素的類別名稱。
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 會轉發到 root 元素。

若要了解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-MenuButton-root	`'button'`	呈現 root 的元件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱	描述
.base--active	如果 `active={true}`，則套用至 root 元素的狀態類別。
.base--disabled	如果 `disabled={true}`，則套用至 root 元素的狀態類別。
.base--expanded	如果關聯的選單為開啟狀態，則套用至 root 元素的狀態類別。

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 會轉發到 root 元素。

若要了解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-MenuItem-root	`'li'`	呈現 root 的元件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱	描述
.base--disabled	如果 `disabled={true}`，則套用至 root `button` 元素的狀態類別。
.base--focusVisible	如果 `focusVisible={true}`，則套用至 root `button` 元素的狀態類別。

選單 API