Pular para o conteúdo
Ajude a traduzir esta página

Popover

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

Coisas para saber ao usar o componente Popover:

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

A paleta com funções de estilo.

Basic Popover

Press Enter to start editing

Â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

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

Hover with a Popover.

Projetos Complementares

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

PopupState helper

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

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.