Componentes · Contenido contextual
Popover (acciones complementarias)
Presenta información o acciones contextuales mediante la API nativa de popover, con apertura, cierre y capa superior administrados por el navegador.
Contenido rico
Admite texto, enlaces y controles breves.
API nativa
Popover y popovertarget gestionan el estado.
Cierre esperado
Permite cerrar con Escape o al interactuar fuera.
Código + resultado
Panel de acciones
El botón declara el elemento que controla mediante popovertarget.
<button class="btn btn-primary" type="button" popovertarget="project-actions">Abrir acciones</button>\n<div class="q-popover rounded-12" id="project-actions" popover>\n <strong>Acciones disponibles</strong>\n <p>Duplica, archiva o comparte el proyecto.</p>\n</div>Duplica, archiva o comparte el proyecto.
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-popover | Superficie emergente. | Aplicar al elemento con popover. |
popover | Activa la API nativa. | Atributo del panel. |
popovertarget | Relaciona el botón con el panel. | Su valor coincide con el id. |
.rounded-* | Radio opcional. | Se compone como utilidad externa. |
Recomendaciones
Buenas prácticas de Popover
Acción contextual
No lo uses para procesos largos o críticos.
Disparador claro
El botón debe explicar qué contenido abrirá.
Contenido breve
Mantén el panel compacto y fácil de cerrar.