跳转到内容
编辑此页面

Popper 弹出提示

使用弹出提示组件，您可在另一个元素之上显示一些内容。 这可以替代 react-popper。

以下是弹出提示组件的一些重要功能：

  • 🕷 Popper 依赖第三方库 (Popper.js) 来实现完美的定位。
  • 💄 这是 react-popper 的一个替代性 API。 它是为了简单性而设计。
  • 📦 8kB 已压缩的包.
  • 为了避免渲染问题，子组件作为页面 body 的 Portal。 您可以使用 disablePortal 来禁用此行为。
  • 不同于 Popper 组件，你可以自由实现滚动（scroll）行为。 弹出提示的位置会随着视口中的可用面积而更新。
  • Clicking away 不会隐藏弹出提示组件。 若您需要这个功能，请使用 ClickAwayListener - 可以参照 menu 文档章节 中的一个样例。
  • 创建一个新 Popper.js 实例时，anchorEl 作为一个参考对象在其中传递。

基础的弹出提示组件

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
  <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
    The content of the Popper.
  </Box>
</Popper>

过渡动画

通过渲染附属的子元素和一个过渡组件，您可以给弹出提示组件的打开/关闭状态加上动画效果。 此组件应遵守以下条件：

  • 作为弹出提示的直接子元素。
  • 当进入过渡时调用 onEnter 回调属性。
  • 当退出过渡完成后应该调用 onExited 回调属性。 这两个回调属性保证了弹出提示组件在关闭并展示完过渡动画时，将会移除子内容。

弹出提示组件已经内嵌支持 react-transition-group。

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps} timeout={350}>
      <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
        The content of the Popper.
      </Box>
    </Fade>
  )}
</Popper>

Alternatively, you can use react-spring.

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps}>
      <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
        The content of the Popper.
      </Box>
    </Fade>
  )}
</Popper>

弹出提示组件的位置



滚动（Scroll）测试

Scroll around this container to experiment with flip and preventOverflow modifiers.

Appearance
(the children stay within their parent DOM hierarchy)
Modifiers (options from Popper.js)
Prevent Overflow
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,
      },
    },
  ]}
>

虚拟元素

而 anchorEl 属性的值可以是对一个占位 DOM 元素的引用。 你需要创建一个类似 VirtualElement 的对象。

高亮文本来显示弹出提示组件：

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.

补充项目

对于更高级的用例，您可以利用：

PopupState helper

在大多数情况下，这个第三方包 material-ui-popup-state 可以处理弹出提示组件 的 state。

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

API