Popper
Popper 可用于在另一个元素之上显示一些内容。它是 react-popper 的替代方案。
Popper 组件的一些重要特性
- 🕷 Popper 依赖于第三方库 (Popper.js) 以实现完美定位。
- 💄 它是 react-popper 的替代 API。它旨在简化。
- 它的子元素是文档 body 上的 MUI Base Portal，以避免渲染问题。您可以使用
disablePortal禁用此行为。 - 滚动不会像 Popover 组件那样被阻止。popper 的位置会随着视口中的可用区域更新。
- 点击外部不会隐藏 Popper 组件。如果您需要此行为，可以使用 MUI Base 点击外部监听器 - 请参阅 菜单文档部分 中的示例。
anchorEl作为参考对象传递，以创建一个新的Popper.js实例。
过渡效果
popper 的打开/关闭状态可以使用渲染属性子组件和过渡组件进行动画处理。此组件应遵守以下条件
- 作为 popper 的直接子代。
- 在进入过渡开始时调用
onEnter回调属性。 - 在退出过渡完成时调用
onExited回调属性。这两个回调允许 popper 在关闭和完全过渡时卸载子内容。
Popper 内置支持 react-transition-group。
或者，您可以使用 react-spring。
在此容器周围滚动以体验 flip 和 preventOverflow modifiers。
防止溢出
Flip
箭头
<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 样式。此组件的无样式版本是需要重度自定义和更小捆绑包大小的理想选择。