Popover
Uso
SPopover muestra un panel flotante posicionado relativo a un elemento de referencia. Usa Floating UI para posicionamiento inteligente y soporta flechas, comportamiento responsivo y gestión de foco.
El slot #reference proporciona funciones de control (toggle, open, close, isOpen) para controlar el popover desde el elemento disparador.
Posición
Usa la prop placement para controlar dónde aparece el panel flotante relativo al disparador.
Flecha
Usa la prop arrow para mostrar una flecha direccional que apunta al elemento de referencia. Los valores disponibles son 'auto', 'light' y 'dark'.
Responsivo
Cuando responsive es true (por defecto), el popover se muestra como una hoja inferior en pantallas móviles y como un panel flotante en pantallas más grandes.
Prevenir Cierre
Cuando preventClose está habilitado, el popover no se cerrará cuando el foco salga del elemento flotante. El usuario debe cerrarlo explícitamente a través del disparador.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
placement | Placement | 'bottom-start' | Posición del panel flotante relativo al elemento de referencia |
arrow | 'auto' | 'light' | 'dark' | - | Muestra una flecha que apunta a la referencia. El valor define el tema de color de la flecha |
offset | number | 0 | Distancia en píxeles entre la referencia y el elemento flotante |
static | boolean | false | Desactiva el volteo automático cuando el popover se desbordaría del viewport |
responsive | boolean | true | En móvil, se muestra como una hoja inferior en lugar de un panel flotante |
preventClose | boolean | false | Previene que el popover se cierre cuando el foco sale del elemento flotante |
preventFocus | boolean | false | Previene el foco automático en el elemento flotante al abrirse |
useShow | boolean | - | Mantiene el elemento flotante montado pero oculto, útil para precargar contenido |
class | string | - | Clases CSS adicionales para el wrapper de referencia |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
close | - | Se emite cuando el popover se cierra |
Slots
| Nombre | Props | Descripción |
|---|---|---|
reference | { isOpen, open, close, toggle, focus, focusout } | Elemento disparador que controla el popover |
default | { isOpen, open, close, toggle, focus, focusout } | Contenido del panel flotante |