Para un diálogo con resultado, usa Modal; para un menú o un diálogo ligero, Popover. Todos usan la capa superior del navegador, y salen con una View Transition donde existe.
UIDrawer
Un panel lateral. Es un
dialog
modal con
command,
commandfor
y
closedby: abre, cierra y devuelve el foco sin JavaScript en los navegadores que los admiten; donde no, lo hace al hidratar. Al seguir un enlace de dentro se cierra al instante, porque la navegación ya es la transición.
<UIDrawer title="Filtros" triggerLabel="Abrir filtros" side="end" model="open">
<UICheckbox model="drafts" label="Incluir borradores" />
<snippet name="footer"><UIButton on:click="() => (open.value = false)">Aplicar</UIButton></snippet>
</UIDrawer>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
title
|
string
| Obligatoria. Nombre del diálogo. |
model
|
Signal<boolean>
false
| Apertura, de doble vía. |
side
|
start | end
start
| Lado por el que entra. |
triggerLabel / closeLabel
|
string
| Texto del disparador y nombre accesible del cierre. |
closedBy
|
any | closerequest | none
any
| Qué lo cierra, además de su botón: el fondo y Esc, sólo Esc o nada. |
closeOnNavigate
|
boolean
true
| Se cierra al seguir un enlace. |
id / class
|
string
| Identidad y clases. |
Admite los snippets
default,
footer
y
trigger(id), y el evento
close.
UITooltip
Un
UIPopover
con
mode="hint"
y el aspecto de un tooltip: se abre con el puntero o el foco, nunca toma el foco, y el disparador lo referencia con
aria-describedby. Escribe en él información complementaria: en táctil no es fiable, porque según el navegador aparece al tocar, sólo mientras se mantiene pulsado o no aparece.
<UITooltip text="Se publica al guardar" placement="top">
<snippet name="trigger">¿Cuándo se publica?</snippet>
</UITooltip>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
text
|
string
| El texto; para algo más, el snippet default. |
placement
|
PopoverPlacement
top
| Lado y alineación. |
offset
|
number
6
| Separación en píxeles. |
delay / closeDelay
|
number
300 / 150
| Milisegundos antes de abrir y de cerrar. |
class / triggerClass / triggerId
|
string
| Clases del contenido y del disparador, e id del disparador. |
Admite los snippets
default,
trigger
y
anchor(trigger), para un disparador propio.
UICommandPalette
No busca: lee
query
en tu código, busca donde quieras (Pagefind, un servidor o una lista local) y pásale
results
y
status. Se abre con su botón o con
Ctrl
y
K, y las flechas recorren los resultados sin sacar el foco del campo.
<script lang="ts">
const query = signal('')
const pages = [{ title: 'Instalación', url: '/installation' }, { title: 'Temas', url: '/theming' }]
const results = computed(() => pages.filter((page) => page.title.toLowerCase().includes(query.value.toLowerCase())))
</script>
<template>
<UICommandPalette model:query="query" bind:results="results.value"
bind:status="results.value.length ? 'ready' : 'empty'" hrefBy="url" labelBy="title" />
</template>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
results
|
readonly T[]
| Obligatoria. Lo que se muestra. |
status
|
idle | loading | ready | empty | unavailable
ready
| Lo que anuncia la región de estado. |
model / model:query / model:active
|
Signal
| Apertura, texto buscado y resultado activo. |
labelBy / hrefBy / childrenBy
|
clave o función
| Etiqueta, destino y resultados anidados. |
label / inputLabel / placeholder / closeLabel
|
string
| Textos. Los valores por defecto siguen el idioma del documento. |
trigger / shortcut
|
boolean
true
| Pinta su botón y atiende el atajo. |
inputId / inputName / class / triggerClass
|
string
| Identidad del campo y clases. |
Admite los snippets
item(item, state),
trigger(modifier)
y
status(status, query), y los eventos
open,
close
y
choose. Los tipos
UIDrawerProps,
UITooltipProps
y
UICommandPaletteProps
se exportan desde
@meekojs/ui/runtime.