SWCore / CSS / Menu, aviso e painel (sw-popover)

Menu, aviso e painel (sw-popover) CSS

Abre, fecha no Esc e ao clicar fora — sem JavaScript. Entrada animada.

O que é

O atributo HTML popover é do próprio navegador: fica por cima de tudo, fecha sozinho e é acessível por teclado. O sw-popover dá o visual do SWCore e a animação de entrada/saída.

Como funciona

O botão aponta para o id com popovertarget. A animação usa @starting-style e transition-behavior: allow-discrete — sem suporte, abre e fecha sem animar. Para um popover que não fecha ao clicar fora, use popover="manual".

Exemplos

Menu, aviso e painel Ao vivo

✅ Pedido salvo. Clique fora para fechar.

Filtros

Painel lateral nativo.

<button sw-btn="pri" popovertarget="menu">Menu</button>
<div id="menu" popover sw-popover="menu">
  <a href="/perfil">Meu perfil</a>
  <a href="/sair">Sair</a>
</div>

<div id="aviso" popover sw-popover="toast">Salvo!</div>
<div id="filtros" popover sw-popover="painel">...</div>

Atributos

popover + sw-popover="menu"

menu suspenso (canto superior direito por padrão; ajuste com top/right)

popover + sw-popover="toast"

aviso no canto inferior direito

popover + sw-popover="painel"

painel lateral com fundo escurecido

popovertarget="id" (no botão)

abre/fecha

popovertargetaction="show\|hide"

só abre / só fecha

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

el.showPopover() / hidePopover() / togglePopover()

controle por código, se precisar

Requisitos

swcore.min.css 2.1.0

Limitações — o que ele não faz

Para avisos que somem sozinhos e fila de mensagens, continue usando SWAlert.

← AnteriorBarra de leitura (sw-progresso) Próximo →Modal nativo (sw-dialog)