Toast
Notifikasi tidak mengganggu yang muncul sementara di skrin untuk memberikan maklum balas atau memberi amaran kepada pengguna tentang sesuatu peristiwa.
- Ikon Utama: Menunjukkan jenis toast (contohnya, berjaya, ralat, info).
- Tajuk: Teks utama yang menyampaikan mesej utama toast.
- Deskripsi: Teks tambahan yang memberikan konteks atau butiran lanjut.
- Bar Kemajuan: Penunjuk visual dengan tempoh lalai selama 3 saat sebelum toast ditutup secara automatik.
- Ikon Tutup (Pilihan): Ikon yang membolehkan pengguna menutup toast secara manual.
Jenis
- Berjaya: Menunjukkan tindakan yang berjaya, seperti membuat permintaan baharu atau menghantar borang.
- Amaran: Mengingatkan pengguna tentang perkara penting yang memerlukan perhatian, seperti melaporkan spam.
- Maklumat: Memberikan maklumat tambahan untuk memastikan pengguna dimaklumkan.
- Ralat: Memaklumkan pengguna tentang ralat yang memerlukan penyelesaian sebelum meneruskan.
Keadaan Ikon Tutup
- Keadaan Tidak Aktif: Apabila toast sedang ditutup, ikon Tutup dalam keadaan dinonaktifkan.
- Keadaan Asal: Semasa tempoh lalai 3 saat sebelum toast ditutup secara automatik, ikon Tutup diaktifkan, membolehkan pengguna menutupnya secara manual.
Lokasi Toast
Toast muncul selepas pengguna melakukan tindakan, menunjukkan hasil sama ada berjaya, ralat, amaran, atau maklumat.
Desktop/Tablet: Toast dipasang di bahagian bawah kanan skrin, dengan margin 24px. Lebar minimum ialah 300px dan maksimum 600px.
Telefon Mudah Alih: Toast dipasang di tengah bawah skrin, dengan margin 18px. Lebar mengikut lebar skrin dengan margin 18px di kedua-dua sisi.
Toast dengan Bar Kemajuan
- Dalam senario berjaya, toast dipaparkan bersama bar kemajuan dengan animasi gelongsor ke atas dan keluar selama 200ms. Bar kemajuan bermula dari lebar 100% dan berakhir pada 0% dalam tempoh 3 saat.
- Toast akan ditutup secara automatik dengan animasi gelongsor ke bawah selama 200ms selepas 3 saat bersama dengan bar kemajuan.