Popover
Non-modal floating content panel.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Non-modal floating content panel.
Uso
Compón Root, Anchor, Trigger, Content, Close.
import * as Popover from "@solidiom/popover"
;<Popover.Root>Contenido de Popover</Popover.Root>Instalación
Instala el paquete con pnpm add @solidiom/popover. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Popover expone 5 partes:
- Root —
data-part="root". - Anchor —
data-part="anchor". - Trigger —
data-part="trigger". - Content —
data-part="content". - Close —
data-part="close".
Estilos
Popover lleva los atributos data-scope="popover" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.
Interacción con teclado
| Tecla | Comportamiento |
|---|---|
| Escape | Cierra el popover y devuelve el foco al disparador. |
Composición
Popover está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.
Renderizado SSR e hidratación
Popover se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.