Popper (彈跳視窗)
Popper 可用於在另一個元件之上顯示一些內容。它是 react-popper 的替代方案。
Popper 元件的一些重要功能
- 🕷 Popper 依賴第三方函式庫 (Popper.js) 實現完美定位。
- 💄 它是 react-popper 的替代 API。目標是簡潔易用。
- 它的子元素是文件 body 上的 MUI Base Portal，以避免渲染問題。您可以使用
disablePortal停用此行為。 - 捲動不會像 Popover 元件那樣被阻擋。彈跳視窗的位置會隨著viewport中的可用區域更新。
- 點擊外部不會隱藏 Popper 元件。如果您需要此行為，可以使用 MUI Base 點擊外部監聽器 - 請參閱 選單文件章節 中的範例。
anchorEl作為參考物件傳遞，以建立新的Popper.js實例。
轉場效果
彈跳視窗的開啟/關閉狀態可以使用 render prop 子元件和轉場元件來製作動畫。此元件應符合以下條件
- 成為彈跳視窗的直接子系。
- 當進入轉場開始時，呼叫
onEntercallback prop。 - 當退出轉場完成時，呼叫
onExitedcallback prop。這兩個 callback 允許彈跳視窗在關閉並完全轉場後卸載子內容。
Popper 內建支援 react-transition-group。
或者，您可以使用 react-spring。
在此容器周圍捲動，以實驗 flip 和 preventOverflow modifiers。
預防溢位
Flip (翻轉)
Arrow (箭頭)
<Popper
placement="bottom"
disablePortal={false}
modifiers={[
{
name: 'flip',
enabled: true,
options: {
altBoundary: true,
rootBoundary: 'document',
padding: 8,
},
},
{
name: 'preventOverflow',
enabled: true,
options: {
altAxis: true,
altBoundary: true,
tether: true,
rootBoundary: 'document',
padding: 8,
},
},
{
name: 'arrow',
enabled: false,
options: {
element: arrowRef,
},
},
]}
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.
無樣式
使用 Base UI Popper 完全掌控元件的設計，無需覆寫 Material UI 或 Joy UI 樣式。此無樣式版本的元件是需要高度自訂和較小套件大小的理想選擇。