跳转到内容
编辑此页面

Popover 弹出框

使用弹出框组件，您可在另一个元素之上显示一些内容。

使用弹出框组件时，你需要了解的事项：

  • 该组件构建在 Modal 组件之上。
  • 不同于 Popper 组件，滚动（scroll）和 click away 行为是被阻止的。

简单的弹出框

⚠️ Missing demo `pages/components/popover/SimplePopover.js` ⚠️

锚点（Anchor）测试

你可以使用单选按钮（radio buttons）调整 anchorOrigin 和 transformOrigin 的位置。 您还可以将 anchorReference 设置为 anchorPosition 或 anchorEl。 当设置为 anchorPosition 时，该组件将指向 anchorPosition 属性，用其可以调整设置弹出框的位置，而不是指向anchorEl。

anchorReference
 
anchorOrigin.vertical
transformOrigin.vertical
anchorOrigin.horizontal
transformOrigin.horizontal
<Popover 
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
>
  The content of the Popover.
</Popover>

鼠标悬停的交互事件

这表明如何使用 Popover 组件，并展示了使用鼠标事件来实现弹出窗口的效果。

Hover with a Popover.

补充项目

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

PopupState helper

在大多数情况下，一个第三方包 material-ui-popup-state 可以为你管理 popper 的状态。

API