Popper

Um Popper pode ser usado para exibir algum conteúdo em cima do outro. É uma alternativa para react-popper.

Algumas características importantes do componente Popper:

🕷 Popper é baseado na biblioteca de terceiros (Popper.js) para um posicionamento perfeito.
💄 É uma API alternativa para react-popper. Visa a simplicidade.
📦 8 kB gzipped.
O elemento filho Portal no corpo do documento, evita problemas de renderização. Você pode desativar esse comportamento com disablePortal.
O scroll não e bloqueado como ocorre com o componente Popover. O posicionamento do popper é atualizado com a área disponível no visor.
Clicar fora não oculta o componente Popper. Se você precisar desse comportamento, você pode usar o componente ClickAwayListener - veja o exemplo na seção da documentação do menu.
O anchorEl é passado como o objeto de referência para criar uma nova instância Popper.js.

A paleta com funções de estilo.

Popper Simples

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
  <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
    The content of the Popper.
  </Box>
</Popper>

Transições

O estado de aberto/fechado do popper pode ser animado com uma propriedade de renderização do elemento filho e um componente de transição. Este componente deve respeitar as seguintes condições:

Ser um elemento filho descendente direto de popper.
Chamar a propriedade de callback onEnter quando a transição de entrada iniciar.
Chamar a propriedade de callback onExited quando a transição de saída for concluída. Esses dois callbacks permitem que o popper desmonte o conteúdo filho quando fechado e seja totalmente transitado.

Popper possui suporte interno para react-transition-group.

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps} timeout={350}>
      <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
        The content of the Popper.
      </Box>
    </Fade>
  )}
</Popper>

Como alternativa, você pode usar react-spring.

<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps}>
      <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
        The content of the Popper.
      </Box>
    </Fade>
  )}
</Popper>

Popper posicionado

Rolagem - Exemplo interativo

Scroll around this container to experiment with flip and preventOverflow modifiers.

Appearance

Placement

Disable portal(the children stay within it's parent DOM hierarchy)

Modifiers (options from Popper.js)

<Popper
  placement="bottom"
  disablePortal={false}
  modifiers={[
    {
      name: 'flip',
      enabled: true,
      options: {
        altBoundary: true,
        rootBoundary: 'document',
        padding: 8,
      },
    },
    {
      name: 'preventOverflow',
      enabled: true,
      options: {
        altAxis: true,
        altBoundary: true,
        tether: true,
        rootBoundary: 'document',
        padding: 8,
      },
    },
    {
      name: 'arrow',
      enabled: false,
      options: {
        element: arrowRef,
      },
    },
  ]}
>

Elemento virtual

A propriedade anchorEl pode ser uma referência a um elemento DOM falso. Você precisa criar um objeto com a estrutura definida como VirtualElement.

Selecione parte do texto para ver o popper:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

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.

API

<Popper />