Powiadomienie

Powiadomienie to jedyny komponent tutaj, który nie może być statyczny: pojawia się w reakcji na coś, co się stało. Strona renderuje pusty obszar przez toasts(), a toast() z sitelo/ui/client do niego dopisuje.

Obszar jest uprzejmym obszarem żywym, więc cokolwiek do niego dopisane zostaje zapowiedziane bez zabierania fokusu.

Jak to ustawić

Umieść obszar gdziekolwiek w body — ma pozycję stałą, więc gdzie, nie ma znaczenia:

import { toasts } from 'sitelo/ui'

body(
  // …strona…
  toasts(),
)

To jedyna część runtime’u, której nic na stronie nie uruchamia za Ciebie, więc jest jedyną, po którą sięgasz sam — z atrybutu zdarzenia, bez niczego w paczce:

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

Albo z własnego modułu, gdy już jakiś działa:

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

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

Spróbuj

Ta strona renderuje obszar toasts(), a przyciski poniżej same pobierają runtime, więc naprawdę wywołują powiadomienia — w prawym dolnym rogu. Nic nie jest ładowane, dopóki któregoś nie naciśniesz.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Zapisano.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('Dwie strony nie mają meta description.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('Build się nie powiódł. Sprawdź raport odnośników.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('To zostaje, dopóki go nie zamkniesz.',{color:'neutral',duration:0}))",
  }, 'Do zamknięcia'),
)

Opcje

duration to czas, przez jaki powiadomienie zostaje, w milisekundach; 0 trzyma je, dopóki ktoś go nie zamknie. Każde dostaje przycisk zamykający, podpięty do tego samego handlera co alert.

toast('Zapisano.', { color: 'success' })
toast('Wciąż pracuję…', { color: 'neutral', duration: 0 })
toast('Wdrożono w 1,7s', { color: 'success', duration: 8000 })

Co renderuje

Powiadomienie to alert() w obszarze powiadomień — te same znaczniki, te same kolory, ten sam przycisk zamykający. Nic nowego do nauczenia i nic dodatkowego do ostylowania.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Zapisano.'),
  alert({ color: 'danger', dismissible: true }, 'Build się nie powiódł. Sprawdź raport odnośników.'),
)

Kiedy go używać

Powiadomienie służy do potwierdzenia czegoś, co czytający właśnie zrobił. To złe miejsce na cokolwiek, na co musi zareagować albo co musi uważnie przeczytać — znika, łatwo je przeoczyć, a na witrynie statycznej większość komunikatów należy do samej strony, jako alert().

Propsy

toasts() nie przyjmuje własnych propsów. toast() z sitelo/ui/client:

Zwraca dodany element albo null, gdy strona nie ma obszaru toasts().