Toast ini adalah sejenis notifikasi yang akan muncul saat kita melakukan suatu aksi. Misalnya kita sedang mengisi form data pribadi kita, saat kita selesai menginputnya maka nanti akan muncul notifikasi pertanda bahwa kita telah selesai mengisi data. Sehingga pengguna mengetahui bahwa dia sudah selesai melakukan pengisianya.

Lalu bagaimana kita membuat toast seperti itu ?. Caranya cukup mudah, kalian bisa menggunakan framework css yang sudah menyediakan fitur seperti itu. Salah satunya adalah Materialize CSS. Materialize CSS ini salah satu framework yang cukup populer dengan fitur yang unik dan keren, termasuk fitur toast. Yap, kita kan belajar bagaimana cara membuat tombol toast dengan materialize.

Untuk membuatnya cukup mudah, kalian bisa ikuti contoh code dibawah ini.

toast.html

Jika sudah kalian simpan filenya dengan format html. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser kalian. Jika berhasil maka tampilanya akan seperti ini.

Tampilan awal seperti gambar diatas. Saat kalian tekan tombol itu maka akan muncul notifikasi disebelah kanan seperti gambar dibawah ini.

Notifikasi tersebut muncul dan akan hilang dengan sendirinya. Bagaimana ini bisa terjadi ?

Kita bisa lihat baris script dibawah ini.

Hallo ini toast adalah teks yang muncul saat kita tekan tombol. Lalu angka 4000 adalah jenjang waktu yang akan muncul pada browser. Lebih dari itu toast akan menghilang dengan sendirinya.

Kalian bisa kembangkan lagi fungsi toast ini dengan kebutuhan website kalian. Seperti yang telah di jelaskan diawal, bisa untuk memberikan notifikasi saat pengisian form ataupun bisa sebagai notifikasi apa saja yang kalian bisa gunakan pada website kalian yang tujuannya tentu untuk memberikan berita pada pengguna bahwa kita telah melakukan sesuatu.

Sekian pembahasan mengenai bagaiman cara membuat tombol toast dengan materialize. Semoga bermanfaat.