Pular para o conteúdo principal

Popover Next

Informação

Você está visualizando a documentação de um recurso next.

Para evitar conflitos de nomes, os recursos next são agrupados na documentação através do objeto Next.

Base​

Elemento âncora​

O Popover sempre será posicionado em relação a um determinado elemento do DOM, denominado como elemento âncora.

Utilize a propriedade anchor para vincular o Popover a um elemento âncora. Passe uma string com o id do elemento, o próprio elemento do DOM ou um objeto de referência do React.

Posicionamento​

Utilize a propriedade side para definir o lado do elemento âncora que o Popover será posicionado e a propriedade alignment para definir o alinhamento em relação ao lado (side) escolhido.

Os valores disponíveis para a propriedade alignment dependem dos valores indicados para a propriedade side:

  • Para side com valores top e bottom: left, center e right
  • Para side com valores left e right: top, center e right
Informação

Caso não haja espaço suficiente, o Popover reposiciona-se automaticamente, ignorando as valores de lado (side) e alinhamento (alignment) fornecidos.

Visibilidade​

Utilize a propriedade show e o callback onToggle para controlar a visibilidade do Popover.

Com click​

Ao passar o mouse​

Botão "Fechar"​

Utilize a propriedade dimissible para habilitar o botão "Fechar" do Popover.

Título e conteúdo​

Utilize o subcomponente Popover.Title para definir o título do Popover.

Além de conteúdos mais básicos, com apenas título e descrição simples, também é possível ter conteúdos totalmente personalizados dentro de um Popover.

Popover de destaque​

Utilize a propriedade kind com o valor 'highlight' para indicar que se trata de um Popover de destaque.

Internacionalização​

Utilize a propriedade closeLabelText para customizar o texto do rótulo do botão "Fechar". Este texto não é exibido na tela, mas é importante para acessibilidade.

O componente Popover, através do atributo Popover.translations, oferece valores para esta propriedade em inglês, português e espanhol. Para mais detalhes acesse a API do componente.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.