Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu tentang komponen toasts pada bootstrap 4.
Apa itu komponen toasts? dan apa kegunaannya? mari simak penjelasan berikut.
Toasts Bootstrap 4
Toasts adalah sebuah komponen dari bootstrap 4 untuk membuat pesan notifikasi. Pasti ada kala nya kita ingin menampilkan pesan notifikasi kepada user yang menggunakan aplikasi maupun website kita. Nah, solusi kerennya kita bisa menggunakan komponen toasts ini.
Bootstrap membuat toast mudah di kustom, agar mudah digunakan dan dikustom oleh kita sebagai penggunanya. Baik itu digunakan pada versi mobile maupun desktop. dan Toast mulai tersedia di bootstrap versi 4.
Oke kita masuk ke cara membuat pesan notifikasi dengan menggunakan komponen toast.
Membuat Pesan Notifikasi Sederhana Dengan Toasts
Pastikan teman-teman sudah membaca cara menghubungkan dan menggunakan bootstrap 4 yang sudah dibahas pada tutorial sebelumnya di malasngoding.com.
Karena di tutorial ini tidak lagi dijelaskan cara menghubungkan file bootstrap, melainkkan kita akan fokus pada cara membuat pesan notifikasi dengan toasts saja.
Perhatikan contoh berikut. Pertama kita harus membuat komponen toast nya dulu. baru kemudian komponen toast yang kita buat ini kita panggil menggunakan perintah jquery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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"> Halo, ini pesan notifikasi toast. <br/> www.malasngoding.com </div> </div> |
Contoh di atas adalah contoh toast sederhana. 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.
1 2 3 |
<script> $('.toast').toast('show'); </script> |
Sedikit penjelasan mengenai perintah jquery di atas. maksud dari 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Toasts Dengan Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <center> <h3>Tutorial Toasts Dengan Bootstrap 4</h3> <h4><a href="https://www.malasngoding.com/toasts-bootstrap-4/">www.malasngoding.com</a></h4> </center> <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"> Halo, ini pesan notifikasi toast. <br/> www.malasngoding.com </div> </div> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> <script> $('.toast').toast('show'); </script> </body> </html> |
Dan pada saat dijalankan maka hasiilnya akan seperti berikut.

notifikasi toast bootstrap 4
Seperti yang terlihat pada gambar di atas. pesan notifikasi toast pun tampil melayang di bagian atas kiri.
Penjelasan Pengaturan Toast
Jika teman-teman perhatikan pada class .toast.
1 |
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" <strong>data-animation="true" data-delay="5000" data-autohide="false"</strong>> |
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. bisa kita 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 teman-teman toast di sembunyikan secara otomatis teman-teman bisa isi dengan nilai true. dan isi nilai false jika teman-teman tidak ingin toast di sembunyikan secara otomatis.
Cara penggunaan selengkapnya bisa teman-teman lihat pada contoh di atas tadi.
Posisi Pesan Notifikasi Toast
Untuk mengatur posisi dari toast, kita bisa menambahkan elemen baru diluar toast, dan menuliskan beberapa perintah css seperti berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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">Bootstrap</strong> <small>11 mins ago</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"> Halo, ini pesan notifikasi toast. <br/> www.malasngoding.com </div> </div> </div> |
dimana pada elemen <div> yang pertama kita beri perintah css “position:relative” sebagai batas. krena 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.

posisi pesan notifikasi toast bootstrap
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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 1</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"> Halo, ini pesan notifikasi pertama. <br/> www.malasngoding.com </div> </div> <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 2</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"> Halo, ini pesan notifikasi kedua. <br/> www.malasngoding.com </div> </div> |
dan hasilnya seperti berikut.

stuck toast
Oke selesai. seluruh demo dan source code dari tutorial komponen toast bootstrap 4 ini bisa teman-teman lihat dan download pada link berikut.
Tutorial toast yang ada pada dokumentasi bootstrap 4 bisa teman-teman baca di sini.
Tutorial Menarik Lainnya

Tutorial Bootstrap 4 #35 : Border Bootstrap 4


Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4


Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

