Bildirim

Bildirim, buradaki statik olamayan tek bileşendir: bir şeyin olmasına yanıt olarak belirir. Sayfa toasts() ile boş bir bölge işler ve sitelo/ui/client içindeki toast() oraya ekler.

Bölge kibar bir canlı bölgedir, bu yüzden eklenen her şey odağı çalmadan duyurulur.

Kurulum

Bölgeyi gövdenin herhangi bir yerine koyun — sabit konumludur, bu yüzden yeri önemli değildir:

import { toasts } from 'sitelo/ui'

body(
  // …sayfa…
  toasts(),
)

Bu, çalışma zamanının sayfadaki hiçbir şeyin sizin için tetiklemediği tek parçasıdır, dolayısıyla kendiniz uzandığınız tek parçadır — hiçbir şey paketlenmeden, bir olay özniteliğinden:

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

Ya da zaten çalışan bir modülünüz varsa kendi modülünüzden:

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

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

Deneyin

Bu sayfa bir toasts() bölgesi işler ve aşağıdaki düğmeler çalışma zamanını kendileri getirir, bu yüzden gerçekten bildirim üretirler — sağ altta. Siz birine basana dek hiçbir şey yüklenmez.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Kaydedildi.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('İki sayfanın meta açıklaması yok.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('Derleme başarısız oldu. Bağlantı raporunu denetleyin.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('Bu, siz kapatana dek durur.',{color:'neutral',duration:0}))",
  }, 'Kapatılana dek'),
)

Seçenekler

duration, bildirimin milisaniye cinsinden ne kadar duracağıdır; 0 onu biri kapatana dek yukarıda tutar. Her bildirim, bir uyarının kullandığı kapatma işleyicisine bağlı bir kapatma düğmesi alır.

toast('Kaydedildi.', { color: 'success' })
toast('Hâlâ çalışıyor…', { color: 'neutral', duration: 0 })
toast('1,7 sn’de dağıtıldı', { color: 'success', duration: 8000 })

Ne işlediği

Bildirim, bildirim bölgesindeki bir alert() öğesidir — aynı biçimlendirme, aynı renkler, aynı kapatma düğmesi. Öğrenilecek yeni bir şey ve biçimlendirilecek fazladan bir şey yok.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Kaydedildi.'),
  alert({ color: 'danger', dismissible: true }, 'Derleme başarısız oldu. Bağlantı raporunu denetleyin.'),
)

Ne zaman kullanmalı

Bildirim, okurun az önce yaptığı bir şeyi onaylamak içindir. Üzerine işlem yapması ya da dikkatle okuması gereken hiçbir şey için doğru yer değildir — kaybolur, gözden kaçması kolaydır ve statik bir sitede çoğu ileti, bir alert() olarak sayfanın kendisine aittir.

Proplar

toasts() kendine ait prop almaz. sitelo/ui/client içindeki toast():

Eklediği öğeyi döndürür; sayfada toasts() bölgesi yoksa null döndürür.