Toast

Tampilan

Kartu toast memakai warna dan variant yang sama dengan Alert. Contoh statis ini memperlihatkan tampilannya; tombol pada bagian berikut membuka notifikasi di sudut layar.

Pemasangan

Pasang satu W4cToaster di app.vue atau layout yang tetap terpasang. Nuxt layer menyediakan useToast sebagai auto-import. Ambil composable di setup atau plugin Nuxt, lalu panggil metodenya dari event pengguna atau setelah operasi di browser selesai.

<template>
  <NuxtPage />
  <W4cToaster />
</template>

Dasar

Gunakan success, error, warning, atau info untuk pesan sesuai hasil aksi. Notifikasi tidak memindahkan fokus secara otomatis. Antrean terpisah per aplikasi Nuxt, termasuk saat render server; panggilan saat SSR tidak diteruskan ke browser.

Tumpukan notifikasi

Toast tampil sebagai tumpukan kartu, dengan pesan terbaru di depan. Tepi tiga kartu sebelumnya menjadi penanda bahwa masih ada pesan lain. Menutup kartu depan memperlihatkan pesan berikutnya.

Membuka dan meringkas tumpukan adalah satu gerakan: kartu tidak berganti tata letak, hanya bergeser dan berubah skala ke posisi barunya. Gunakan Lihat notifikasi untuk membuka kartu aktif, termasuk melalui keyboard atau layar sentuh. Timer hanya berjalan pada kartu depan saat tumpukan ringkas, tanpa hover atau fokus. Pesan yang tertutup tidak habis sebelum dibaca. Contoh ini memakai duration: 0 supaya bisa dicoba tanpa terburu-buru.

Variant

Tersedia tiga varian visual: soft (default, berlatar lembut), outline (dengan bingkai warna semantik), dan solid (warna pekat penuh).

Dengan aksi

Toast dapat memuat tombol aksi interaktif, seperti tombol 'Batalkan' setelah aksi lokal. Contoh ini menyimulasikan aksi; handler aplikasi yang melakukan pemulihan atau unduhan sebenarnya. Tombol aksi tidak menutup toast otomatis; panggil remove(id) jika aksi sudah selesai.

Posisi

Viewport <W4cToaster /> mendukung 6 pilihan posisi di layar. Posisi bawaan adalah kanan atas (top-right). Klik posisi untuk memindahkan notifikasi contoh. Halaman ini memakai satu Toaster yang ada dalam contoh posisi, sehingga notifikasi tidak muncul ganda.

Persisten dan ikon

Setel duration: 0 jika pesan harus tetap tampil hingga pengguna mengklik tombol tutup secara manual. Ikon juga dapat dikustomisasi dengan ikon Iconify pilihan.

Selama duration lebih dari nol, garis di tepi bawah kartu menyusut sesuai waktu yang tersisa, jadi pembaca tahu berapa lama lagi pesannya ada. Garis itu berhenti saat kartu di-hover atau menerima fokus keyboard — sama seperti timernya — dan tidak ditampilkan sama sekali bila sistem meminta prefers-reduced-motion, karena garis yang tidak menyusut akan mengaku waktunya masih penuh. Matikan dengan progress: false bila tidak diinginkan.

API