UIPopover
coloca su contenido en la capa superior del navegador con el atributo
popover
y lo ancla al disparador con CSS anchor positioning, sin JavaScript. Si no cabe, se coloca al otro lado con
position-try-fallbacks. Un navegador sin anclaje lo abre sin anclar: sigue funcionando.
Menú de acciones
Con
role="menu", los hijos con
role="menuitem"
se recorren con las flechas,
Inicio,
Fin
y la primera letra de cada acción.
Esc
cierra el menú y devuelve el foco al disparador.
<script lang="ts">
const action = signal('')
</script>
<template>
<UIPopover role="menu" placement="bottom-start" bind:offset="6">
<snippet name="trigger">Acciones del proyecto</snippet>
<UIButton variant="ghost" role="menuitem" on:click="() => (action.value = 'renombrar')">Renombrar</UIButton>
<UIButton variant="ghost" role="menuitem" on:click="() => (action.value = 'duplicar')">Duplicar</UIButton>
<UIButton variant="ghost" role="menuitem" on:click="() => (action.value = 'archivar')">Archivar</UIButton>
</UIPopover>
</template>Diálogo ligero
Con
role="dialog"
el foco entra en el contenido al abrirse. Úsalo para controles breves que no necesitan bloquear la página; para una tarea que exige atención, usa
Modal. El modelo controla la apertura desde código.
Mostrando proyectos publicados.
<script lang="ts">
const opened = signal(false)
</script>
<template>
<UIPopover role="dialog" label="Filtrar proyectos" model="opened">
<snippet name="trigger">Filtrar</snippet>
<UICheckbox label="Publicados" model="published" />
<UIButton on:click="() => (opened.value = false)">Aplicar filtros</UIButton>
</UIPopover>
</template>Tooltip
Con
mode="hint"
el contenido es un tooltip: se abre al pasar el puntero, tras
delay, o al enfocar el disparador, y nunca recibe el foco. El disparador lo referencia con
aria-describedby. Escribe en él información complementaria, nunca la única explicación de una acción.
UITooltip
es esta misma variante con el aspecto de un tooltip, y es la que usa este ejemplo; véase
Superposiciones.
<UITooltip bind:offset="6">
<snippet name="trigger">Estado: borrador</snippet>
Sólo tu equipo puede verlo hasta que lo publiques.
</UITooltip>Un disparador propio
El snippet
anchor
sustituye el botón que pinta UI. Recibe los atributos del disparador para aplicarlos con
bind="trigger"; UIPopover lo encuentra por su
id
y le añade el teclado y el anclaje.
<UIPopover role="menu">
<snippet name="anchor" params="trigger">
<button type="button" class="avatar" bind="trigger">
<img src="/avatar.png" alt="Mi cuenta">
</button>
</snippet>
<button role="menuitem">Perfil</button>
<button role="menuitem">Cerrar sesión</button>
</UIPopover>API
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
model
|
Signal<boolean>
false
| Apertura del contenido, de doble vía. |
mode
|
auto | manual | hint
auto
| auto se cierra al pulsar fuera y con Esc; manual sólo desde el disparador, Esc o el modelo; hint es un tooltip. |
role
|
menu | dialog | tooltip
| Patrón ARIA del contenido. Con mode=hint, tooltip por defecto. |
placement
|
top | bottom | left | right, con -start o -end
bottom-start
| Lado y alineación respecto al disparador. |
offset
|
number
0
| Separación en píxeles con el disparador. |
label
|
string
| Nombre accesible del contenido. Sin ella, un menú o un diálogo se nombran con el disparador. |
matchWidth
|
boolean
false
| El contenido mide al menos lo que el disparador. |
delay / closeDelay
|
number
300 / 150
| Con mode=hint, milisegundos antes de abrir y de cerrar. |
class / triggerClass
|
string
| Clases del contenido y del botón disparador. |
triggerId
|
string
| id del disparador. Por defecto, uno estable entre SSR e hidratación. |
Admite los snippets
default,
trigger
y
anchor. El evento
toggle
recibe un objeto con
open
cada vez que el contenido se abre o se cierra. Con una
ref:, el componente expone
show(),
hide()
y
toggle(). Los tipos
UIPopoverProps,
PopoverPlacement
y
PopoverTrigger
se exportan desde
@meekojs/ui/runtime.