Toast

Toast adalah satu-satunya komponen di sini yang tidak bisa statis: ia muncul sebagai tanggapan atas sesuatu yang terjadi. Halamannya merender wilayah kosong dengan toasts(), dan toast() dari sitelo/ui/client menambahkan ke sana.

Wilayahnya adalah wilayah langsung yang sopan, jadi apa pun yang ditambahkan diumumkan tanpa merebut fokus.

Menyiapkannya

Taruh wilayahnya di mana saja di dalam body — ia berposisi tetap, jadi tempatnya tidak penting:

import { toasts } from 'sitelo/ui'

body(
  // …halamannya…
  toasts(),
)

Inilah satu-satunya bagian runtime yang tidak dipicu apa pun di halamannya untuk Anda, jadi inilah satu-satunya bagian yang Anda raih sendiri — dari sebuah atribut peristiwa, tanpa apa pun dibundel:

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

Atau dari modul Anda sendiri, ketika sudah ada yang berjalan:

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

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

Cobalah

Halaman ini merender sebuah wilayah toasts() dan tombol di bawah mengambil runtime-nya sendiri, jadi mereka benar-benar memunculkan toast — di kanan bawah. Tidak ada yang dimuat sampai Anda menekan salah satunya.

stack({ direction: 'row', gap: 'sm', wrap: true },
  button({
    variant: 'soft',
    color: 'success',
    onclick: "import('/su/toast.js').then(m=>m.toast('Tersimpan.',{color:'success'}))",
  }, 'Success'),
  button({
    variant: 'soft',
    color: 'warning',
    onclick: "import('/su/toast.js').then(m=>m.toast('Dua halaman tidak punya deskripsi meta.',{color:'warning'}))",
  }, 'Warning'),
  button({
    variant: 'soft',
    color: 'danger',
    onclick: "import('/su/toast.js').then(m=>m.toast('Build gagal. Periksa laporan tautannya.',{color:'danger'}))",
  }, 'Danger'),
  button({
    variant: 'soft',
    color: 'neutral',
    onclick: "import('/su/toast.js').then(m=>m.toast('Yang ini bertahan sampai Anda menutupnya.',{color:'neutral',duration:0}))",
  }, 'Sampai ditutup'),
)

Opsi

duration adalah berapa lama toast-nya bertahan, dalam milidetik; 0 menahannya sampai seseorang menutupnya. Setiap toast mendapat tombol tutup, tersambung ke penangan penutupan yang sama dengan yang dipakai peringatan.

toast('Tersimpan.', { color: 'success' })
toast('Masih bekerja…', { color: 'neutral', duration: 0 })
toast('Diterapkan dalam 1,7 dtk', { color: 'success', duration: 8000 })

Apa yang direndernya

Toast adalah sebuah alert() di wilayah toast — markup yang sama, warna yang sama, tombol tutup yang sama. Tidak ada yang baru untuk dipelajari, dan tidak ada tambahan untuk ditata.

stack({ gap: 'sm', style: 'width: 100%; max-width: 24rem' },
  alert({ color: 'success', dismissible: true }, 'Tersimpan.'),
  alert({ color: 'danger', dismissible: true }, 'Build gagal. Periksa laporan tautannya.'),
)

Kapan memakainya

Toast dipakai untuk menegaskan sesuatu yang baru saja dilakukan pembacanya. Ia adalah tempat yang salah untuk apa pun yang perlu mereka tindaklanjuti atau baca dengan saksama — ia menghilang, ia mudah terlewat, dan di situs statis sebagian besar pesan seharusnya berada di halamannya sendiri sebagai alert().

Props

toasts() tidak menerima props sendiri. toast() dari sitelo/ui/client:

Ia mengembalikan elemen yang ditambahkannya, atau null ketika halamannya tidak punya wilayah toasts().