MenuButtonAPI

React MenuButton 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

有關此 React 元件用法的範例和詳細資訊，請造訪元件展示頁面

Import

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

閱讀這份關於最小化 bundle 大小的指南，瞭解它們之間的差異。

Props

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
color	'danger' \| 'info' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	元件的顏色。它支援適用於此元件的主題顏色。若要瞭解如何新增自己的顏色，請查看主題元件 — 擴充顏色。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串，也可以是元件。
disabled	bool	false	若為 `true`，則元件會停用。
endDecorator	node	-	放置在子元件之後的元素。
fullWidth	bool	false	若為 `true`，按鈕會佔用其容器的完整寬度。
loading	bool	false	若為 `true`，則會顯示載入指示器。
loadingIndicator	node	<CircularProgress />	節點應包含具有 `role="progressbar"` 且具有可存取名稱的元素。預設情況下，我們會呈現一個由按鈕本身標記的 `CircularProgress`。
loadingPosition	'center' \| 'end' \| 'start'	'center'	載入指示器可以放置在按鈕的開始、結束或中心。
size	'sm' \| 'md' \| 'lg' \| string	'md'	元件的大小。若要瞭解如何將自訂大小新增至元件，請查看主題元件 — 擴充大小。
slotProps	{ endDecorator?: func \| object, loadingIndicatorCenter?: func \| object, root?: func \| object, startDecorator?: func \| object }	{}	用於每個內部 slot 的 props。
slots	{ endDecorator?: elementType, loadingIndicatorCenter?: elementType, root?: elementType, startDecorator?: elementType }	{}	用於每個內部 slot 的元件。請參閱下方的Slots API 以取得更多詳細資訊。
startDecorator	node	-	放置在子元件之前的元素。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'outlined'	要使用的全域 variant。若要瞭解如何新增自己的 variant，請查看主題元件 — 擴充 variants。

ref 會轉發到根元素。

主題預設 props

您可以使用 JoyMenuButton 來變更此元件的預設 props 透過主題。

Slots

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

Slot 名稱	類別名稱	預設元件	描述
root	.MuiMenuButton-root	`'button'`	呈現 root 的元件。
startDecorator	.MuiMenuButton-startDecorator	`'span'`	呈現 start decorator 的元件。
endDecorator	.MuiMenuButton-endDecorator	`'span'`	呈現 end decorator 的元件。
loadingIndicatorCenter	.MuiMenuButton-loadingIndicatorCenter	`'span'`	呈現 loading indicator center 的元件。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至根元素的狀態類別。
.MuiMenuButton-colorContext	colorContext	觸發色彩反轉時套用至根元素的類別名稱。
.MuiMenuButton-colorDanger	colorDanger	若 `color="danger"`，則套用至根元素的類別名稱。
.MuiMenuButton-colorInfo	colorInfo	若 `color="info"`，則套用至根元素的類別名稱。
.MuiMenuButton-colorNeutral	colorNeutral	若 `color="neutral"`，則套用至根元素的類別名稱。
.MuiMenuButton-colorPrimary	colorPrimary	若 `color="primary"`，則套用至根元素的類別名稱。
.MuiMenuButton-colorSuccess	colorSuccess	若 `color="success"`，則套用至根元素的類別名稱。
.MuiMenuButton-colorWarning	colorWarning	若 `color="warning"`，則套用至根元素的類別名稱。
.MuiMenuButton-fullWidth	fullWidth	若 `fullWidth={true}`，則套用至根元素的類別名稱。
.MuiMenuButton-loading	loading	若 `loading={true}`，則套用至根元素的類別名稱。
.MuiMenuButton-sizeLg	sizeLg	若 `size="lg"`，則套用至根元素的類別名稱。
.MuiMenuButton-sizeMd	sizeMd	若 `size="md"`，則套用至根元素的類別名稱。
.MuiMenuButton-sizeSm	sizeSm	若 `size="sm"`，則套用至根元素的類別名稱。
.MuiMenuButton-variantOutlined	variantOutlined	若 `variant="outlined"`，則套用至根元素的類別名稱。
.MuiMenuButton-variantPlain	variantPlain	若 `variant="plain"`，則套用至根元素的類別名稱。
.MuiMenuButton-variantSoft	variantSoft	若 `variant="soft"`，則套用至根元素的類別名稱。
.MuiMenuButton-variantSolid	variantSolid	若 `variant="solid"`，則套用至根元素的類別名稱。

您可以使用下列其中一個自訂選項覆寫元件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件styleOverrides 屬性的一部分。

原始碼

如果您在本頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。