Toast

Der Toast ist die eine Komponente hier, die nicht statisch sein kann: er erscheint, weil etwas passiert. Die Seite rendert mit toasts() einen leeren Bereich, und toast() aus sitelo/ui/client hängt darin etwas an.

Der Bereich ist eine höfliche Live-Region, sodass alles Angehängte angesagt wird, ohne den Fokus zu stehlen.

Einrichtung

Setze den Bereich irgendwo in den Body — er ist fix positioniert, das Wo spielt also keine Rolle:

import { toasts } from 'sitelo/ui'

body(
  // …die Seite…
  toasts(),
)

Das ist der eine Teil des Runtimes, den nichts auf der Seite für dich auslöst — also der eine Teil, den du selbst erreichst, aus einem Event-Attribut heraus und ohne irgendetwas zu bündeln:

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

Oder aus deinem eigenen Modul, wenn ohnehin schon eines läuft:

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

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

Probier es aus

Diese Seite rendert einen toasts()-Bereich, und die Buttons unten holen sich das Runtime selbst — sie erzeugen also echte Toasts, unten rechts. Geladen wird nichts, bis du einen drückst.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Gespeichert.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('Zwei Seiten haben keine Meta-Beschreibung.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('Der Build ist fehlgeschlagen. Sieh in den Linkbericht.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('Dieser bleibt, bis du ihn schließt.',{color:'neutral',duration:0}))",
  }, 'Bis zum Schließen'),
)

Optionen

duration ist, wie lange der Toast bleibt, in Millisekunden; 0 lässt ihn stehen, bis jemand ihn schließt. Jeder Toast bekommt einen Schließen-Button, verdrahtet mit demselben Handler, den ein Hinweis nutzt.

toast('Gespeichert.', { color: 'success' })
toast('Arbeite noch…', { color: 'neutral', duration: 0 })
toast('In 1,7 s deployt', { color: 'success', duration: 8000 })

Was er rendert

Ein Toast ist ein alert() im Toast-Bereich — gleiches Markup, gleiche Farben, gleicher Schließen-Button. Nichts Neues zu lernen und nichts zusätzlich zu gestalten.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Gespeichert.'),
  alert({ color: 'danger', dismissible: true }, 'Der Build ist fehlgeschlagen. Sieh in den Linkbericht.'),
)

Wann man einen nimmt

Ein Toast bestätigt etwas, das die Leserin gerade getan hat. Für alles, worauf sie reagieren oder was sie sorgfältig lesen muss, ist er der falsche Ort — er verschwindet, man übersieht ihn leicht, und auf einer statischen Website gehören die meisten Meldungen als alert() in die Seite selbst.

Props

toasts() nimmt keine eigenen Props. toast() aus sitelo/ui/client:

Er gibt das eingefügte Element zurück, oder null, wenn die Seite keinen toasts()-Bereich hat.