跳到內容
🚀 影響 MUI Base 2025 年的藍圖！參與最新的開發者調查
+

Popper

Popper 組件讓您建立工具提示和彈出式視窗，以顯示頁面上元素的相關資訊。

Popper API

匯入

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

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

Props

原生組件的 Props 也可使用。

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

如果為 true，則顯示組件。

anchorElHTML 元素
| object
| func		-

一個 HTML 元素、virtualElement，或是一個回傳上述兩者的函數。它用於設定 popper 的位置。回傳值將作為 Popper 實例的參考物件傳遞。

childrennode
| func		-

Popper 渲染函數或節點。

containerHTML 元素
| func		-

一個 HTML 元素或回傳 HTML 元素的函數。container 將會附加 portal children。
您也可以提供一個回呼函數，該函數會在 React 版面配置效果中被呼叫。這讓您可以從 ref 設定容器，並使伺服器端渲染成為可能。
預設情況下，它會使用最上層文件物件的 body，因此在大多數情況下它只是 document.body。

direction'ltr'
| 'rtl'		'ltr'

文字方向。

disablePortalboolfalse

children 將會位於父組件的 DOM 階層之下。

keepMountedboolfalse

始終將 children 保留在 DOM 中。此 prop 在 SEO 情況下或當您想要最大化 Popper 的響應性時非常有用。

modifiersArray<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>		-

Popper.js 是基於「外掛式」架構，其大多數功能都完全封裝在「修飾器」中。
修飾器是一個函數，每次 Popper.js 需要計算 popper 的位置時都會呼叫它。因此，修飾器應具有高效能，以避免瓶頸。若要了解如何建立修飾器，請閱讀修飾器文件。

placement'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top'		'bottom'

Popper 放置位置。

popperOptions{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end'
| 'auto-start'
| 'auto'
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top', strategy?: 'absolute'
| 'fixed' }		{}

提供給 Popper.js 實例的選項。

popperRefref-

指向所使用 popper 實例的 ref。

slotProps{ root?: func
| object }		{}

用於 Popper 內部每個插槽的 props。

slots{ root?: elementType }{}

用於 Popper 內部每個插槽的組件。可以是字串 (使用 HTML 元素) 或組件。

請參閱下方的插槽 API 以了解更多詳細資訊。

transitionboolfalse

協助支援 react-transition-group/Transition 組件。


ref 會轉發到根元素。

CSS 類別

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

類別名稱描述
.base-Popper-root套用至根元素的類別名稱。