Toast adalah komponen plugin untuk notifikasi yang mirip dengan notifikasi push (push notification) yang biasa tampil pada halaman web. Toast ini dibuat dengan flexbox yang dapat dengan mudah kita sesuaikan dengan kebutuhan dari website kita.
Toast akan otomatis tersembunyi atau mengilang dalam waktu 0.5 detik setelah muncul jika kita tidak mengatur autohide-nya menjadi false. Untuk membuat toast tambahkan class toast pada tag <div>.
Ada beberapa hal yang perlu diketahui dalam menggunakan Toast, yaitu:
- Wajib menggunakan javascript (tambahkan link javascript di dalam tag head)
- Toast harus diinisialisasi dengan class toast
- Posisi atau align dari Toast diatur sendiri (tidak ada class seperti toast toast-left)
- Toast akan otomatis hilang jika autohide nya tidak dinonaktifkan.
Membuat Pesan Notifikasi Sederhana Dengan Toasts
Pertama kita harus membuat komponen toast nya dulu, baru kemudian komponen toast yang kita buat ini kita panggil menggunakan perintah jquery.
Perhatikan contoh berikut ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Toast Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Toast Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="5000" data-autohide="false">
<div class="toast-header">
<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>
<strong class="mr-auto">Notifikasi</strong>
<small>1 menit yang lalu</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hai..., ini adalah pesan notifikasi toast
<br/>
www.agussuratna.net
</div>
</div>
</div>
</body>
</html>
Dari contoh di atas, jika dijalankan pesan notifikasi toast tersebut tidak akan tampil. Karena untuk menampilkannya kita harus menggunakan jquery.
Maka sekarang kita akan menggunakan fungsi toast() untuk menampilkan pesan notifikasi toast. Seperti contoh berikut :
<script>
$('.toast').toast('show');
</script>
Penjelasan mengenai perintah jquery di atas adalah memerintahkan untuk menampilkan class toast dengan fungsi toast(). Dalam fungsi toast() tersebut bisa kita isi dengan “show” untuk menampilkan toast, “hide” untuk menyembunyikan toast atau “dispose” untuk menyembunyikan selamanya elemen toast.
Maka sekarang keseluruhan kodenya akan seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Toast Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Toast Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="5000" data-autohide="false">
<div class="toast-header">
<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>
<strong class="mr-auto">Notifikasi</strong>
<small>1 menit yang lalu</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hai..., ini adalah pesan notifikasi toast
<br/>
www.agussuratna.net
</div>
</div>
</div>
<script>
$('.toast').toast('show');
</script>
</body>
</html>
Hasilnya :
Penjelasan Pengaturan Toast
Perhatikan pada class .toast pada sintak contoh di atas :
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="5000" data-autohide="false">
Ada 3 atribut yang bisa kita gunakan untuk pengaturan notifikasi toast. yaitu :
- data-animation=””
atribut ini berguna untuk pengaturan ingin menggunakan animasi saat toast muncul atau tidak, nilainya bisa kita isi dengan nilai true untuk ya atau false untuk tidak. - data-delay=””
atribut ini digunakan untuk pengaturan berapa lama toast tampil, kita bisa isi dengan angka 1000 untuk waktu selama 1 detik, 5000 untuk 5 detik dan lain-lain. - data-autohide=””
atribut ini berguna untuk pengaturan auto hide toast, jika kita ingin toast di sembunyikan secara otomatis kita bisa isi dengan nilai true dan isi nilai false jika kita tidak ingin toast di sembunyikan secara otomatis.
Posisi Pesan Notifikasi Toast
Untuk mengatur posisi dari toast, kita bisa menambahkan elemen baru di luar toast dan menuliskan beberapa perintah css seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Toast Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Toast Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<div aria-live="polite" aria-atomic="true" style="position: relative">
<div class="toast" data-animation="true" data-delay="5000" data-autohide="false" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>
<strong class="mr-auto">Notifikasi</strong>
<small>1 menit yang lalu</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hai..., ini adalah pesan notifikasi toast
<br/>
www.agussuratna.net
</div>
</div>
</div>
</div>
<script>
$('.toast').toast('show');
</script>
</body>
</html>
Pada elemen <div> yang pertama kita beri perintah css “position:relative” sebagai batas, karena di class .toast nya kita beri css position absolute, nilai top 0 dan nilai right 0, sehingga akan membuat posisi dari toast ini berada di paling kanan.
Jika kita jalankan, maka hasilnya akan seperti berikut :
Pesan Notifikasi Tampil Menumpuk
Kita juga bisa membuat pesan notifikasi toast tampil menumpuk dengan toast lainnya. Kita tinggal menambahkan pesan notifikasi toastnya saja seperti biasa.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Toast Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Toast Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="5000" data-autohide="false">
<div class="toast-header">
<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>
<strong class="mr-auto">Notifikasi</strong>
<small>1 menit yang lalu</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hai..., ini adalah pesan notifikasi toast
<br/>
www.agussuratna.net
</div>
</div>
<br/>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="5000" data-autohide="false">
<div class="toast-header">
<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>
<strong class="mr-auto">Notifikasi</strong>
<small>2 menit yang lalu</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hai..., ini adalah pesan notifikasi toast kedua
<br/>
www.agussuratna.net
</div>
</div>
</div>
<script>
$('.toast').toast('show');
</script>
</body>
</html>
Hasilnya :
Demikian tutorial mengenai toast pada bootstrap, semoga bermanfaat.
Referensi :
- https://www.malasngoding.com/toasts-bootstrap-4/
Be the first to comment