Toast

El toast es el único componente de aquí que no puede ser estático: aparece como respuesta a que ocurre algo. La página dibuja una región vacía con toasts(), y toast() desde sitelo/ui/client le añade cosas.

La región es una zona viva cortés, así que todo lo que se añade se anuncia sin robar el foco.

Puesta en marcha

Pon la región en cualquier parte del body: es de posición fija, así que dónde da igual:

import { toasts } from 'sitelo/ui'

body(
  // …la página…
  toasts(),
)

Esta es la única parte del runtime que nada de la página dispara por ti, así que es la única que alcanzas tú — desde un atributo de evento, sin nada en el bundle:

button({ onclick: "import('/su/toast.js').then(m=>m.toast('Guardado.',{color:'success'}))" }, 'Guardar')

O desde tu propio módulo, cuando ya haya uno en marcha:

import { toast } from 'sitelo/ui/client'

toast('Guardado.', { color: 'success' })

Pruébalo

Esta página dibuja una región toasts() y los botones de abajo van a buscar el runtime ellos mismos, así que producen toasts de verdad — abajo a la derecha. No se carga nada hasta que pulsas uno.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Guardado.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('Dos páginas no tienen meta descripción.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('La compilación falló. Mira el informe de enlaces.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('Este se queda hasta que lo cierres.',{color:'neutral',duration:0}))",
  }, 'Hasta que se cierre'),
)

Opciones

duration es cuánto se queda el toast, en milisegundos; 0 lo mantiene hasta que alguien lo cierre. Todos los toasts llevan botón de cerrar, conectado al mismo manejador de descarte que usa una alerta.

toast('Guardado.', { color: 'success' })
toast('Sigo trabajando…', { color: 'neutral', duration: 0 })
toast('Desplegado en 1,7 s', { color: 'success', duration: 8000 })

Qué dibuja

Un toast es una alert() dentro de la región de toasts: el mismo marcado, los mismos colores, el mismo botón de descarte. Nada nuevo que aprender, y nada extra que estilizar.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Guardado.'),
  alert({ color: 'danger', dismissible: true }, 'La compilación falló. Mira el informe de enlaces.'),
)

Cuándo usar uno

Un toast sirve para confirmar algo que el lector acaba de hacer. Es el sitio equivocado para cualquier cosa sobre la que tenga que actuar o que deba leer con cuidado: desaparece, es fácil no verlo, y en un sitio estático la mayoría de los mensajes van en la propia página como una alert().

Props

toasts() no admite props propias. toast() desde sitelo/ui/client:

Devuelve el elemento que añadió, o null cuando la página no tiene región toasts().