DailyBlog.id - Bagi yang pernah koding di android pasti sudah tidak asing lagi dengan toast dan snackbar untuk menampilkan notifikasi singkat. Di web sendiri kalian juga bisa buat notifikasi toast dan snackbar menggunakan JavaScript. Tentu pada tutorial kali ini tidak menggunakan jQuery melainkan nantinya akan langsung menggunakan Vanilla JavaScript dan itu sangat membantu bagi saya, karena tidak membiasakan menggunakan jQuery.
Untuk toast dan snackbar sendiri biasanya sering digunakan oleh Google untuk menampilkan notifikasi atau pesan di halaman Google, seperti contohnya ketika kalian mengunjungi Google Adsense lalu kalian mengedit iklan pada situs kalian, dan jika berhasil akan tampil sebuah pesan. Nah seperti itu lah tampilannya. Jika masih belum tau, kalian bisa lihat gambar yang ada di bawah ini.
Untuk gambar di atas ini, merupakan snackbar dan untuk toast hanya menampilkan teks saja dan tidak menampilkan action button atau sejenisnya (seperti button "Tutup").
Dalam penggunaan "Material Toast" nantinya, kalian bisa mendapatkan beberapa fitur. Seperti:
- Dapat mengubah timeout toast atau snackbarnya.
- Terdapat 4 tampilan yaitu info, error, success, dan warning
- Bisa meng-kostum action button untuk snackbar
Oke langsung saja ke tutorialnya:
Buat Toast dan Snackbar Popup Seperti Google
1. Yang harus kalian lakukan yaitu download pluginnya melalui link berikut ini https://github.com/andspdev/material-toast (sekalian script lengkapnya)
2. Setelah itu terdapat folder yang bernama dist dan kalian bisa buka folder tersebut. Dan terdapat file mdtoast.min.css dan mdtoast.min.js . Setelah itu kalian bisa pasang kedua file tersebut ke dalam HTML kalian dengan cara copy script yang ada di bawah ini, lalu pasang di dalam <head></head>
<link rel="stylesheet" href="./dist/mdtoast.min.css" /> <script src="./dist/mdtoast.min.js"></script>
3. Lalu Untuk buat Toast kalian bisa pasang JavaScript seperti ini
mdtoast('Ini merupakan Toast Info.', {
type: 'info'
});
mdtoast('Ini merupakan Toast Error.', {
type: 'error'
});
mdtoast('Ini merupakan Toast Warning.', {
type: 'warning'
});
mdtoast('Ini merupakan Toast Success.', {
type: 'success'
});
4. Atau kalian juga ingin untuk memasang Snackbar. Dan kalian bisa copy script yang ada di bawah ini
const snackbar = mdtoast('Ini merupakan Snackbar.', {
interaction: true,
actionText: 'UNDO',
action: function(){
this.hide();
},
init: true
});
snackbar.show();
5. Secara default timeout pada Toast dan Snackbarnya yaitu (5000ms), untuk mengubahnya kalian bisa tambahkan duration: 8000 di mdtoast untuk timeoutnya menjadi 8 detik. Kalian bisa ubah sesuai dengan kebutuhan kalian.
mdtoast('Hai! Apa kabar?.', {
type: 'info',
duration: 8000
});
6. Jika kalian tidak ingin menggunakan "modal" yang menutupi layar, kalian bisa disable modal tersebut menambahkan modal: false di mdtoast
mdtoast('Ini merupakan Toast Info.', {
type: 'info',
duration: 10000,
modal: false
});
7. Jika masih belum jelas, kalian bisa copy script yang ada di bawah ini lalu buat file dengan nama toast-snackbar.html (contoh saja). Lalu buka di browser kalian http://localhost/toast-snackbar.html (contoh juga).
toast-snackbar.html
<!DOCTYPE html>
<html>
<head>
<title>Material Toast</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="./dist/mdtoast.min.css" />
<script src="./dist/mdtoast.min.js"></script>
</head>
<body>
<b>Ubah Posisi</b><br/><br/>
<select id="ubahPosisi">
<optgroup label="Bagian atas :">
<option value="top left">atas kiri</option>
<option value="top center">atas tengah</option>
<option value="top right">atas kanan</option>
</optgroup>
<optgroup label="Bagian bawah :">
<option value="bottom left">bawah kiri</option>
<option value="bottom center">bawah tengah</option>
<option value="bottom right">bawah kanan</option>
</optgroup>
</select>
<br/><br/>
<b>Ubah Tampilan</b><br/><br/>
<select id="ubahTampilan">
<option>default</option>
<option>info</option>
<option>error</option>
<option>success</option>
<option>warning</option>
</select>
<br/><br/>
<p>Klik button untuk lihat Toast dan Snackbar</p>
<button id="toast">Ini Toast</button> <button id="snackbar">Ini Snackbar</button>
<script>
window.onload = () =>
{
const ubahPosisi = () => {return document.querySelector('#ubahPosisi').value}
const ubahTampilan = () => {return document.querySelector('#ubahTampilan').value}
// Button #toast
document.getElementById('toast').addEventListener('click', () =>
{
mdtoast('Ini tampilan Toast.', {
duration: 8000, // waktu untuk auto hide
position: ubahPosisi(),
modal: false,
type: ubahTampilan()
});
})
// Button #snackbar
document.getElementById('snackbar').addEventListener('click', () =>
{
mdtoast('Ini tampilan Snackbar',
{
interaction: true,
interactionTimeout: 8000, // waktu untuk auto hide (kalau interfaction: true)
actionText: 'Tutup',
position: ubahPosisi(),
action: function()
{
alert('Berhasil menutup snackbar.');
this.hide();
},
modal: false,
type: ubahTampilan()
})
})
}
</script>
</body>
</html>
Untuk script lengkapnya, kalian bisa download melalui link di bawah ini:
https://github.com/andspdev/material-toast
Mungkin cukup sekian artikel dari saya, semoga artikel yang saya berikan ini dapat bermafaat bagi kalian semua. Dan jika saya ada salah pengetikan, saya mohon maaf. Sekian dan terima kasih.
Selamat mencoba!...