Toast

Un toast è l’unico componente qui che non può essere statico: compare in risposta a qualcosa che succede. La pagina renderizza una regione vuota con toasts(), e toast() da sitelo/ui/client ci aggiunge dentro.

La regione è una live region garbata, quindi ciò che vi viene aggiunto è annunciato senza rubare il focus.

Come si imposta

Metti la regione in un punto qualsiasi del body — è a posizione fissa, quindi dove non importa:

import { toasts } from 'sitelo/ui'

body(
  // …la pagina…
  toasts(),
)

Questa è l’unica parte del runtime che niente nella pagina fa scattare al posto tuo, quindi è l’unica parte che raggiungi tu — da un attributo di evento, senza nulla nel bundle:

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

Oppure dal tuo modulo, quando ne hai già uno in esecuzione:

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

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

Provalo

Questa pagina renderizza una regione toasts() e i pulsanti qui sotto si vanno a prendere il runtime da sé, quindi producono davvero dei toast — in basso a destra. Niente viene caricato finché non ne premi uno.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Salvato.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('Due pagine non hanno la meta description.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('La build è fallita. Controlla il report dei link.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('Questo resta finché non lo chiudi.',{color:'neutral',duration:0}))",
  }, 'Finché non lo chiudi'),
)

Opzioni

duration è quanto resta il toast, in millisecondi; 0 lo tiene su finché qualcuno non lo chiude. Ogni toast riceve un pulsante di chiusura, collegato allo stesso handler che usa un avviso.

toast('Salvato.', { color: 'success' })
toast('Ancora al lavoro…', { color: 'neutral', duration: 0 })
toast('Pubblicato in 1,7s', { color: 'success', duration: 8000 })

Cosa renderizza

Un toast è un alert() nella regione dei toast — stesso markup, stessi colori, stesso pulsante di chiusura. Niente di nuovo da imparare, e niente di extra da stilizzare.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Salvato.'),
  alert({ color: 'danger', dismissible: true }, 'La build è fallita. Controlla il report dei link.'),
)

Quando usarne uno

Un toast serve a confermare qualcosa che chi legge ha appena fatto. È il posto sbagliato per qualunque cosa su cui debba agire o che debba leggere con attenzione — sparisce, è facile non vederlo, e su un sito statico la maggior parte dei messaggi sta nella pagina stessa come alert().

Props

toasts() non accetta props proprie. toast() da sitelo/ui/client:

Restituisce l’elemento che ha aggiunto, oppure null quando la pagina non ha una regione toasts().