Popover
Permite mostrar ações ou informações complementares em uma caixa flutuante ancorada a um elemento, que se abre ao interagir com ele.
- Agrupar ações secundárias: exibi-las ancoradas a um disparador de opções quando não há espaço para incluí-las em linha. Ex.: "Editar", "Arquivar" e "Excluir" em uma linha de uma lista.
- Editar um valor sem sair do contexto: resolver uma edição pontual sem abrir um modal nem navegar para outra tela. Ex.: ajustar o estoque de um produto direto na linha da listagem.
- Mostrar as subseções de um item do menu em sua versão colapsada: exibir as opções aninhadas de uma seção quando o Menu principal está colapsado. Ex.: ao passar o mouse sobre "Produtos" colapsado, mostrar "Lista de produtos", "Estoque", "Categorias", "Assinaturas" e "Tabelas de preços".
- Exibir filtros contextuais: aplicar seleções rápidas sobre uma visualização. Ex.: ordenar uma listagem por data mais ou menos recente.
- Mostrar um texto de ajuda breve: uma dica curta sobre um elemento, sem ações nem conteúdo interativo. Em vez disso, usar Tooltip. Ex.: esclarecer o que um ícone faz.
- Interromper o fluxo para uma tarefa de foco completo: um formulário extenso ou uma decisão que exige toda a atenção da pessoa. Em vez disso, usar Modal. Ex.: confirmar a exclusão de um recurso.
- Selecionar um valor dentro de um formulário: uma opção que faz parte do preenchimento de dados. Em vez disso, usar Select. Ex.: selecionar o país em um campo de endereço.
Lista de vendas
Pedidos de compra
Carrinhos abandonados
- Surface: o fundo, a borda arredondada e a sombra da caixa flutuante que a destacam do conteúdo atrás.
- Content: os elementos exibidos dentro da caixa, como uma lista de ações ou um dado complementar.
- Arrow: indicador opcional que aponta para o disparador para reforçar o vínculo entre ambos; é controlado por arrow (visível por padrão).
top: a caixa aparece acima do disparador.
bottom (valor padrão): a caixa aparece abaixo do disparador.
left: a caixa aparece à esquerda do disparador.
right: a caixa aparece à direita do disparador.
Sufixo -start: alinha a borda inicial da caixa (esquerda se o lado é top/bottom, superior se é left/right) com o disparador, em vez de centralizá-la.
Sufixo -end: alinha a borda final da caixa (direita se o lado é top/bottom, inferior se é left/right) com o disparador, em vez de centralizá-la.
base (valor padrão): padding padrão. Para conteúdo próprio que não traz seu próprio espaçamento, como um texto ou um dado.
small: padding reduzido. Para menus de ações, onde um padding amplo separa demais as opções.
none: sem padding. Quando o conteúdo já traz seu próprio espaçamento interno ou suas linhas precisam ocupar toda a largura da caixa. Ex.: uma lista de opções selecionáveis.
Com seta (valor padrão): reforça o vínculo entre a caixa e o disparador. Usar quando esse vínculo não é evidente à primeira vista.
Sem seta (arrow={false}): para menus de ações ancorados a um disparador claro, onde a seta adiciona ruído. É o mais frequente em menus de opções.
enabledClick, valor padrão. A caixa se abre e se fecha ao clicar no disparador. Adequado para conteúdo com o qual a pessoa vai interagir, como ações ou opções.
enabledHover. A caixa se abre ao passar o cursor. Reservar para casos específicos como Menu colapsado, onde o clique já tem outra ação (vai direto para uma seção).
neutral-background
Neutral (neutral-background, valor padrão): fundo neutro, adequado para a maioria dos casos.
primary-interactive
Primary (primary-interactive): usado como base do padrão Product updates, para anunciar uma novidade de produto dentro da própria caixa.
O uso mais frequente é como menu de ações contextuais sobre cada linha de uma lista ou de uma tabela, ancorado a um disparador de opções (position="bottom-end" é comum quando o disparador está alinhado à direita). O popover se abre por clique e se fecha ao escolher uma opção ou ao clicar fora da caixa; o estado de visibilidade costuma ser controlado por linha com visible e onVisibility.
Compartilhar
Duplicar
Excluir
Convém ativar renderOverlay para que um toque acidental não alcance os elementos que ficam atrás da caixa enquanto ela está aberta: é o padrão que evita, por exemplo, disparar a ação de uma linha ao tocar fora do menu para fechá-lo. O disparador precisa oferecer uma área tátil confortável; um disparador de opções cumpre esse requisito.
Compartilhar
Duplicar
Excluir
Pedido #1024
Editar
Arquivar
Mostrar um conjunto breve de ações secundárias relacionadas ao elemento.
Editar dados
Evite formulários e ações complexas que precisem de confirmação.
Lista de clientes
Mensagens
Usar o popover quando o conteúdo tem mais de uma linha ou inclui ações.
Loja online
Ir para a loja online
Não usar para textos breves ou esclarecimentos apenas de leitura.
Compartilhar
Excluir
Manter apenas um popover aberto por vez.
Arquivar
Ver detalhe
Compartilhar
Excluir
Evitar vários popovers abertos ao mesmo tempo.
- Disparador como controle real: o disparador precisa ser um elemento interativo (Button, IconButton ou Link), não um texto ou uma caixa sem papel definido, para que receba foco pelo teclado e anuncie sua função.
- Rótulo em disparadores só ícone: quando o disparador é um IconButton, incluir um aria-label que descreva qual ação ele abre. Ex.: "Mais ações".
- Fechamento com teclado e clique fora: com enabledDismiss (ativado por padrão) o popover se fecha com a tecla Esc e ao clicar fora da caixa; não desativá-lo sem oferecer outra forma de fechá-lo.
- Foco visível no conteúdo: os controles dentro da caixa recebem foco e mostram seu anel; manter uma ordem de foco lógica e não anular esse anel com estilos próprios.
- Overlay para evitar interações acidentais: ativar renderOverlay quando um clique fora da caixa não deva alcançar os elementos que ficam atrás, algo especialmente relevante em telas touch.
- Abrir os popovers com ações clicando ou tocando neles: isso permite que a janela permaneça aberta enquanto a pessoa faz sua escolha.
Instale o componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Box, Button, IconButton, Popover } from "@nimbus-ds/components";
import { EditIcon, ArchiveIcon, TrashIcon, EllipsisIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<Box display="flex" justifyContent="center">
<Popover
arrow={false}
padding="small"
content={
<Box display="flex" flexDirection="column" gap="1">
<Button appearance="transparent">
<EditIcon />
Editar
</Button>
<Button appearance="transparent">
<ArchiveIcon />
Archivar
</Button>
<Button appearance="transparent">
<TrashIcon />
Eliminar
</Button>
</Box>
}
>
<IconButton source={<EllipsisIcon />} aria-label="Más acciones" />
</Popover>
</Box>
);
export default Example;As propriedades adicionais são repassadas ao elemento <Popover>. Consulte a documentação do elemento div para ver a lista de atributos aceitos.
Popover
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode); | An HTML element, or a function that returns one. It's used to set the position of the popover. | |
content* | React.ReactNode | The content of the popover. | |
visible | boolean | If true, the component is shown. | |
onVisibility | (visible: boolean) => void; | Function to control popover opening and closing. | |
arrow | boolean | 'true' | Conditional for displaying the popover arrow. |
matchReferenceWidth | boolean | 'false' | A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents. |
position | 'bottom' | 'bottom' | Position of the popover. |
enabledHover | boolean | 'false' | Adds hover event listeners that change the open state, like CSS :hover. |
enabledClick | boolean | 'true' | Adds click event listeners that change the open state. |
enabledDismiss | boolean | 'true' | Adds listeners that dismiss (close) the floating element. |
offset | number | '10' | Offest displaces the floating element from its core placement along the specified axes. |
renderOverlay | boolean | 'false' | When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover. |
width | string | 'fit-content' | The width property specifies the width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
maxWidth | string | The maxWidth property specifies the maximum width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
height | string | The height property specifies the height of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
zIndex | '100' | The zIndex property specifies the stack order of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
backgroundColor | 'danger-surfaceHighlight' | 'neutral-background' | The backgroundColor property sets the background color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
color | 'danger-surfaceHighlight' | 'neutral-background' | The color property is used to set the color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
padding | 'base' | 'base' | The padding properties are used to generate space around an popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
overflow | 'auto' | The overflow shorthand property sets the desired behavior for an popover's content overflow. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.