Pular para o conteúdo

🎉 Material UI v5 is out now! Check out the announcement blog post

Popover

Um Popover pode ser usado para exibir algum conteúdo em cima do outro.

Coisas para saber ao usar o componente Popover:

  • O componente é construído sobre o componente Modal.
  • A rolagem e o clique fora não é permitido, ao contrário do componente Popper.

Popover Simples

Âncora - Exemplo interativo

Use os botões de opção para ajustar as posições anchorOrigin e transformOrigin. Você também pode definir anchorReference para anchorPosition ou anchorEl. Quando configurado com anchorPosition, o componente irá, ao contrário de anchorEl, basear se nas propriedades do anchorPosition, na qual você pode ajustar para definir a posição do popover.

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>

Interação mouse em cima

Este exemplo demonstra como usar o componente Popover para implementar um comportamento popover baseado no evento mouse over.

Hover with a Popover.

Projetos Complementares

Para situações de uso mais avançadas, você pode tirar proveito com:

PopupState helper

Existe um pacote de terceiros material-ui-popup-state que cuida do estado popover para você na maioria das situações.