Popup
Popup 元件是一個實用工具，可讓您在工具提示和彈出視窗中顯示內容。
Popup API
Import
import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
// or
import { Unstable_Popup as Popup } from '@mui/base';請閱讀這份關於最小化套件大小的指南，以了解差異。
原生元件的 Props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| anchor | HTML 元素 | 物件 | 函式 | - | HTML 元素、虛擬元素，或是一個回傳上述兩者的函式。它用於設定彈出視窗的位置。 |
| container | HTML 元素 | 函式 | - | HTML 元素或回傳 HTML 元素的函式。容器會附加 portal 子節點到其上。預設情況下，它使用最上層文件物件的 body，所以在這些情況下它是 |
| disablePortal | bool | false | 如果為 |
| keepMounted | bool | false | 如果為 |
| middleware | Array<false | { fn: func, name: string, options?: any }> | - | 用於定位彈出視窗的 Floating UI middleware 集合。如果未提供，將會使用 |
| offset | 函式 | 數字 | { alignmentAxis?: number, crossAxis?: number, mainAxis?: number } | 0 | 彈出視窗和觸發元素之間的距離。當提供自訂 |
| open | bool | false | 如果為 |
| placement | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'bottom' | 決定彈出視窗相對於觸發元素的位置。 |
| slotProps | { root?: func | object } | {} | 用於 Popup 內部每個 slot 的 props。 |
| slots | { root?: elementType } | {} | 用於 Popup 內部每個 slot 的元件。可以是字串 (使用 HTML 元素) 或元件。 請參閱下方Slots API 以取得更多詳細資訊。 |
| strategy | 'absolute' | 'fixed' | 'absolute' | 要使用的 CSS position 屬性類型 (absolute 或 fixed)。 |
ref 會轉發到 root 元素。若要了解如何自訂 slot，請查看覆寫元件結構指南。
| Slot 名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| root | .base-Popup-root | 'div' | 呈現 root 的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當特定狀態被觸發時，它們會應用於元件的 slots。
| 類別名稱 | 描述 |
|---|---|
| .base--open | 當彈出視窗開啟時，應用於 root 元素的類別名稱。 |