UIAlert
Un aviso dentro de la página, en cuatro tonos además del neutro.
danger
usa
role="alert"; los demás,
note. Elige
status
para anunciar un cambio, o
none
si ya está dentro de una región viva.
Versión nueva
UI 1.8 usa los tokens --ui-*.
Cambios guardados
Ya están publicados.
Traducción pendiente
Esta página aún no está en inglés.
No se pudo publicar
La base de datos no responde.
<UIAlert tone="success" title="Cambios guardados" description="Ya están publicados." />
<UIAlert tone="danger" title="No se pudo publicar" dismiss on:dismiss="clear">
<p>La base de datos no responde.</p>
<snippet name="actions"><UIButton size="sm" on:click="retry">Reintentar</UIButton></snippet>
</UIAlert>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
tone
|
neutral | info | success | warning | danger
neutral
| Significado del aviso. |
title / description
|
string
| Título y texto. |
role
|
alert | status | note | none
alert con danger; note
| Cómo lo anuncia un lector de pantalla. |
dismiss / closeLabel
|
boolean / string
false
| Botón de cierre, con su nombre accesible. |
icon
|
Snippet
| Icono, como prop o como snippet. |
class
|
string
| Clases adicionales. |
Admite los snippets
default,
icon
y
actions, y el evento
dismiss.
UIToast
Un aviso breve que flota sobre la página. Es un
popover
manual: no toma el foco.
useToast()
se autoimporta y añade avisos desde una acción del cliente, nunca durante SSR. Hace falta
UIApp
en la raíz.
<script lang="ts">
const toast = useToast()
</script>
<template>
<UIButton on:click="() => toast.add({ text: 'Cambios guardados', tone: 'success', duration: 5000 })">
Guardar
</UIButton>
</template>| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
text
|
string
| Obligatoria. El aviso. |
tone
|
neutral | info | success | warning | danger
neutral
| Significado del aviso. |
duration
|
number
5000
| Milisegundos antes de cerrarse; 0 lo conserva hasta cerrarlo. La cuenta se pausa con el cursor o el foco dentro. |
closeLabel
|
string
| Nombre accesible del botón de cierre. |
actions
|
Snippet
| Acciones del aviso. |
add
devuelve un id para
remove(id);
clear()
cierra todos. También puede usarse
UIToast
de forma declarativa, con el evento
dismiss.
UIEmpty
Lo que se muestra cuando no hay nada.
inline
para una lista,
panel
para una vista entera.
Sin proyectos
Crea el primero para empezar.
No hay resultados.
Ningún filtro coincide.
| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
title
|
string
No hay resultados.
| Título. El valor por defecto sigue el idioma del documento. |
description
|
string
| Qué hacer a continuación. |
variant
|
inline | panel
inline
| Tamaño del espacio vacío. |
class
|
string
| Clases adicionales. |
Admite los snippets
default
y
actions.
UISkeleton
La forma del contenido mientras llega. Anuncia la carga una sola vez y respeta el movimiento reducido.
<UIEmpty variant="panel" title="Sin proyectos" description="Crea el primero para empezar.">
<snippet name="actions"><UIButton>Crear proyecto</UIButton></snippet>
</UIEmpty>
<UISkeleton bind:lines="3" bind:widths="['full', 'long', 'short']" />| Nombre | Tipo / valor inicial | Descripción |
|---|---|---|
lines
|
number
3
| Número de líneas. |
widths
|
readonly (full | long | short)[]
| Ancho de cada línea. |
label
|
string
Cargando
| Lo que anuncia. El valor por defecto sigue el idioma del documento. |
class
|
string
| Clases adicionales. |
Los textos por defecto están en
ui.messages.<idioma>.feedback
(véase
Temas). Los tipos
UIAlertProps,
UIToastProps,
UIToastContext,
UIEmptyProps
y
UISkeletonProps
se exportan desde
@meekojs/ui/runtime.