Popper 弹出提示

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

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

🕷 Popper 依赖第三方库 (Popper.js) 来实现完美的定位。
💄 这是 react-popper 的一个替代性 API。它是为了简单性而设计。
📦 24.9 kB gzipped.
The children is Portal to the body of the document to avoid rendering problems. 您可以使用 disablePortal 来禁用此行为。
The scroll isn't blocked like with the Popover component. 弹出提示的位置会随着视口中的可用面积而更新。
Clicking away 不会隐藏弹出提示组件。 If you need this behavior, you can use ClickAwayListener - see the example in the menu documentation section.
创建一个新 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>

<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>

Press Enter to start editing

过渡动画

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

作为弹出提示的直接子元素。
当进入过渡时调用 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>

<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>

Press Enter to start editing

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>

<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>

Press Enter to start editing

弹出提示组件的位置

滚动（Scroll）测试

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

Appearance

Placement

Disable portal(the children stay within their parent DOM hierarchy)

Modifiers (options from Popper.js)

<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

<Popper />

Popper 弹出提示

基础的弹出提示组件

过渡动画

弹出提示组件的位置

滚动（Scroll）测试

Prevent Overflow

Flip

Arrow

虚拟元素

补充项目

PopupState helper

Unstyled

API