跳转到内容

Popover 弹出框

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

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

  • The component is built on top of the Modal component.
  • The scroll and click away are blocked unlike with the Popper component.

Basic Popover

Press Enter to start editing

锚点(Anchor)测试

你可以使用单选按钮(radio buttons)调整 anchorOrigintransformOrigin 的位置。 您还可以将 anchorReference 设置为 anchorPositionanchorEl。 当设置为 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>

鼠标悬停的交互事件

This demo demonstrates how to use the Popover component and the mouseover event to achieve popover behavior.

Hover with a Popover.

补充项目

For more advanced use cases, you might be able to take advantage of:

PopupState helper

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