Popover
Elemento âncora
Evite usar o hook useRef para declarar a referência do elemento âncora.
A referência só será definida durante a primeira renderização. Por isso, como o useRef não força uma nova renderização, eventualmente o valor da propriedade anchorEl pode ficar nulo.
O Popover deve ser sempre posicionado de forma alinhada ao elemento âncora, que pode ser qualquer referência do DOM, como textos, links, botões, entre outros.
É essencial que o âncora seja definido e repassado ao Popover através da propriedade anchorEl, para que o componente funcione corretamente.
Controle de estado e interações
O componente Popover é controlado, ou seja, deve ser definido um estado para manipular suas interações de abertura e fechamento.
Exemplos:
Abertura com click
Abertura com hover
Além dos exemplos acima, é possível usar outros eventos para controlar o estado do Popover.
Fechamento do Popover
A definição de fechamento do botão deve estar presente através da propriedade dismissible.
O callback onClose é executado quando a pessoa usuária clica fora da área do Popover, pressiona a tecla ESC ou clica no botão fechar (quando existir).
Através do parâmetro reason, é possível definir regras específicas para o fechamento.
Exemplos:
Fechar apenas ao clicar no botão fechar
Fechar apenas ao clicar numa ação interna
Conteúdo
O Popover funciona como um template component, ou seja, além de oferecer estilos para ele, também define espaçamentos entre os componentes passados através da propriedade children.
Use o subcomponente Popover.Title para indicar o título do Popover.
É possível ter conteúdos mais básicos, com apenas título e descrição simples.
Ou também ter conteúdos totalmente personalizados dentro de um Popover.
Popover de destaque
O Popover pode ser utilizado em seu formato padrão, com fundo branco, ou no formato de destaque com o fundo roxo, por meio da propriedade kind com o valor Popover.kinds.highlight, a depender da necessidade que cada caso de uso apresenta.
Posicionamento
O Popover ajusta seu posicionamento automaticamente caso ele não tenha espaço suficiente na tela para exibir o conteúdo na posição definida.
Utilize a propriedade position se for necessário definir um posicionamento inicial. Consulte a API do componente para mais detalhes.
Internacionalização
Através da propriedade closeLabelText é possível customizar o texto interno de rótulo do botão fechar. Este texto não é exibido na tela, mas é importante para acessibilidade.
Por padrão, o texto está em inglês, mas para ajudar neste processo existem constantes disponíveis com em inglês, português e espanhol. Para mais detalhes acesse nossa aba de API do componente.
Exemplo de uso da constante para o português: