Modal

Modal 組件讓您建立對話框、彈出視窗、燈箱和其他元素，以強制使用者在繼續之前採取行動。

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

請閱讀這篇關於最小化套件大小的指南，以了解差異。

也提供原生組件的 Props。

名稱	類型	預設值	描述
children*	element	-	單個子內容元素。此需要能夠容納 ref。
open*	bool	-	若為 `true`，則顯示此組件。
closeAfterTransition	bool	false	若設定為 true，Modal 會等到巢狀的 Transition 完成後才關閉。
container	HTML 元素 \| func	-	HTML 元素或返回 HTML 元素的函式。`container` 將會附加 portal children。您也可以提供回呼函式，此函式會在 React 版面配置效果中呼叫。這讓您可以從 ref 設定 container，並使伺服器端渲染成為可能。預設情況下，它會使用最上層 document 物件的 body，因此大多數時候它只是 `document.body`。
disableAutoFocus	bool	false	若為 `true`，當 modal 開啟時，將不會自動將焦點轉移到自身，並在關閉時將焦點替換回最後一個焦點元素。這也適用於任何具有 `disableAutoFocus` prop 的 modal children。一般來說，不應將其設定為 `true`，因為這會使 modal 對於輔助技術（如螢幕閱讀器）的存取性降低。
disableEnforceFocus	bool	false	若為 `true`，modal 將不會阻止焦點在開啟時離開 modal。一般來說，不應將其設定為 `true`，因為這會使 modal 對於輔助技術（如螢幕閱讀器）的存取性降低。
disableEscapeKeyDown	bool	false	若為 `true`，按下 escape 鍵將不會觸發 `onClose` 回呼函式。
disablePortal	bool	false	`children` 將位於父組件的 DOM 階層之下。
disableRestoreFocus	bool	false	若為 `true`，modal 將不會在 modal 隱藏或卸載後，將焦點還原到先前聚焦的元素。
disableScrollLock	bool	false	停用滾動鎖定行為。
hideBackdrop	bool	false	若為 `true`，則不會渲染背景幕。
keepMounted	bool	false	始終將 children 保留在 DOM 中。此 prop 在 SEO 情況下或當您想要最大化 Modal 的響應性時非常有用。
onBackdropClick	func	-	當背景幕被點擊時觸發的回呼函式。已棄用－使用帶有 `reason` 參數的 `onClose` prop 來處理 `backdropClick` 事件。
onClose	func	-	當組件請求關閉時觸發的回呼函式。`reason` 參數可以選擇性地用於控制對 `onClose` 的響應。簽名：`function(event: object, reason: string) => void` `event` 回呼函式的事件來源。 `reason` 可以是：`"escapeKeyDown"`、`"backdropClick"`。
onTransitionEnter	func	-	當過場效果進入時呼叫的函式。
onTransitionExited	func	-	當過場效果已結束時呼叫的函式。
slotProps	{ backdrop?: func \| object, root?: func \| object }	{}	用於 Modal 內部每個 slot 的 props。
slots	{ backdrop?: elementType, root?: elementType }	{}	用於 Modal 內部每個 slot 的組件。可以是字串（用於 HTML 元素）或組件。請參閱下方的Slots API以了解更多詳細資訊。

ref 會轉發到 root 元素。

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

Slot 名稱	類別名稱	預設組件	描述
root	.base-Modal-root	`'div'`	渲染 root 的組件。
backdrop	.base-Modal-backdrop		渲染背景幕的組件。

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

類別名稱	描述
.base-Modal-hidden	若 `Modal` 已結束，則套用到 root 元素的類別名稱。

Modal

Modal API

Import

Props

Slots

CSS 類別