跳转到内容

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

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>

锚点(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 的状态。