跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的發展藍圖！參與最新的開發者調查

PopoverAPI

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

Demo 示範

Import 引入

import Popover from '@mui/material/Popover';
// or
import { Popover } from '@mui/material';

閱讀這份關於最小化 bundle 大小的指南，以了解差異。

Props 屬性

Modal 元件的 props 屬性也適用。

名稱類型預設值描述
open*bool-

若為 true，則會顯示此元件。

actionref-

用於命令式操作的 ref。目前僅支援 updatePosition() 操作。

anchorElHTML 元素
| func		-

HTML 元素、PopoverVirtualElement，或是一個回傳上述兩者的函式。它用於設定 popover 的位置。

anchorOrigin{ horizontal: 'center'
| 'left'
| 'right'
| number, vertical: 'bottom'
| 'center'
| 'top'
| number }		{ vertical: 'top', horizontal: 'left', }

這是錨點上 popover 的 anchorEl 將附加到的點。當 anchorReference 為 'anchorPosition' 時，不會使用此屬性。
選項：vertical: [top, center, bottom]；horizontal: [left, center, right]。

anchorPosition{ left: number, top: number }-

這是可用於設定 popover 位置的位置。座標是相對於應用程式的客戶端區域。

anchorReference'anchorEl'
| 'anchorPosition'
| 'none'		'anchorEl'

這決定了在設定 popover 的位置時，要參考哪個錨點 prop 屬性。

BackdropComponentelementTypestyled(Backdrop, { name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) => { return styles.backdrop; }, })({ zIndex: -1, })

背景幕元件。此 prop 屬性啟用自訂背景幕渲染。

BackdropPropsobject-

應用於 Backdrop 元素的 Props 屬性。

childrennode-

元件的內容。

classesobject-

覆寫或擴充應用於元件的樣式。

請參閱下方CSS 類別 API 以取得更多詳細資訊。

containerHTML 元素
| func		-

HTML 元素、元件實例或回傳上述兩者的函式。container 將會傳遞至 Modal 元件。
預設情況下，它使用 anchorEl 最上層文件物件的 body，因此大多數時候它只是 document.body。

disableScrollLockboolfalse

停用滾動鎖定行為。

elevationinteger8

popover 的海拔高度。

marginThresholdnumber16

指定 popover 可以顯示在視窗邊緣多近的位置。若為 null，popover 將不受視窗限制。

onClosefunc-

當元件請求關閉時觸發的回呼函式。reason 參數可選擇性地用於控制對 onClose 的回應。

PaperProps{ component?: element type }{}

應用於 Paper 元素的 Props 屬性。
此 prop 是 slotProps.paper 的別名，若兩者皆使用，將會被其覆寫。

slotProps{ backdrop?: func
| object, paper?: func
| object, root?: func
| object, transition?: func
| object }		{}

用於每個內部 slot 的 props 屬性。

slots{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }{}

用於每個內部 slot 的元件。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面以取得更多詳細資訊。

transformOrigin{ horizontal: 'center'
| 'left'
| 'right'
| number, vertical: 'bottom'
| 'center'
| 'top'
| number }		{ vertical: 'top', horizontal: 'left', }

這是 popover 上將附加到錨點原點的點。
選項：vertical: [top, center, bottom, x(px)]；horizontal: [left, center, right, x(px)]。

TransitionComponentelementTypeGrow

用於 transition 的元件。請依照本指南以深入了解此元件的需求。

transitionDuration'auto'
| number
| { appear?: number, enter?: number, exit?: number }		'auto'

設定為 'auto' 以根據高度自動計算 transition 時間。

TransitionPropsobject{}

應用於 transition 元素的 Props 屬性。預設情況下，此元素基於此 Transition 元件。

ref 會轉發到根元素。

繼承

雖然上面沒有明確的文件說明，但 Modal 元件的 props 屬性在 Popover 中也適用。您可以利用這一點來鎖定巢狀元件。

Slots 插槽

Slot 插槽名稱Class 類別名稱預設元件描述
root.MuiPopover-rootModal用於 root 插槽的元件。
paper.MuiPopover-paperPaper用於 paper 插槽的元件。
transitionGrow用於 transition 插槽的元件。
backdropBackdrop用於 backdrop 插槽的元件。

原始碼

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