Toast Bootstrap: Bootstrap Tutorial #13

Setelah kemarin membahas mengenai Button Groups Bootstrap: Bootstrap Tutorial #12. Pada kali ini kita akan membahas mengenai plugin baru yang ada pada bootstrap 4 yaitu Toast. Pada bootstrap versi dibawah 4 untuk membuat toast ini perlu coding yang lumayan rumit ya, tapi di bootstrap 4 ini kita tinggal memasukkan class toast saja.

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 teman – teman sesuaikan dengan kebutuhan dari website teman – teman.

Toast akan otomatis tersembunyi atau mengilang dalam waktu 0.5 detik setelah muncul jika teman – teman 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.

Section Artikel

1 Dasar Toast
2 Menampilkan dan menyembunyikan Toast
3 Penempatan Toast (Align)

Dasar Toast

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 Toast</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".show-toast").click(function(){
                $("#myToast").toast('show');
            });
        });
    </script>
  </head>
  <body>
        <button type="button" class="btn btn-primary show-toast">Klik bro</button>
        <div class="toast" id="myToast" style="position: absolute; top: 0; right: 0;">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-grav"></i>Hai!</strong>
                <small>12 menit yang lalu</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                <div>Klik link untuk mengambil hadiah ya. <a href="#">Disini!</a></div>
            </div>
        </div>
  </body>
</html>

Penjelasan:

Pada dasar toast saya menggunakan jQuery versi 3.5.1. Jika teman – teman belum tahu mana bagian js (javascript) pada contoh program dasar toast diatas, mudah saja . Js ditandai dengan tag <script> </script> pada Php dan html.

Nah, untuk diklik dan keluat toast nya saya menggunakan javascript dibawah:

$(document).ready(function(){ //memastikan semua script dokumen telah siap (terutama JQuery)
$(“.show-toast”).click(function(){ //ketika class show-toast diklik (tanda . /titik menandakan class) maka
$(“#myToast”).toast(‘show’); //menampilkan element yang memiliki id myToast (id ditandai tanda #
});
});

Menampilkan dan menyembunyikan Toast

Seperti sebelumnya bahwa toast akan menutup otomatis jika autohide nya tidak dimatikan. nah cara mematikan autohide yaitu dengan menambahkan attribute data-autohide=”false”. contoh program nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 Toast</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".show-toast").click(function(){
                $("#myToast").toast('show');
            });
        });
    </script>
  </head>
  <body>
    <div class="bs-example">
        <button type="button" class="btn btn-primary show-toast">Klik tampil</button>
        <div class="toast" id="myToast" style="position: absolute; top: 0; right: 0;" data-autohide="false">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-grav"></i> Hai!</strong>
                <small>12 menit lalu</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                <div>Selamat anda terpilih menjadi pemenang undian berhadiah <a href="#">klik disini untuk melihat</a></div>
            </div>
        </div>
    </div>
  </body>
</html>

Penempatan Toast (Align)

Untuk penempatan atau align toast harus diatur secara manual, caranya dengan menggunakan CSS. Contohnya:

Perataan	sintak CSS
Rata Kiri	left: 0%; position: fixed; transform: translate(0%, 0px); z-index: 9999;
Rata Tengah	left: 50%; position: fixed; transform: translate(-50%, 0px); z-index: 9999;
Rata kanan	right: 0%; position: fixed; transform: translate(0%, 0px); z-index: 9999;

Perataan toast

Penjelasan CSS:

left / right : 0%; -> mengatur posisi horizontal element dari batas kiri/kanan sebesar 0%
position: fixed ; -> posisi element yang diberi css relatif terhadap jendela browser
transform:translate (0%,0px); -> mereposisi elemen ke arah horizontal 0% dan vertikal 0px
z-index:9999; -> menentukan urutan element (tidak dikasih juga tidak apa apa)

Contoh Script nya adalah:

Rata kiri

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 Toast</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".show-toast").click(function(){
                $("#myToast").toast('show');
            });
        });
    </script>
  </head>
  <body>
         <button type="button" class="btn btn-primary show-toast">Klik bos</button>
        <div class="toast" id="myToast" style="left: 0%; position: fixed; transform: translate(0%, 0px); z-index: 9999;">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-grav"></i> Hai !</strong>
                <small>12 menit lalu</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                <div>selamat anda mendapat hadiah dari undian. <a href="#">klik!</a> untuk mendapat hadiah</div>
            </div>
        </div>
  </body>
</html>

Rata Tengah

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 Toast</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".show-toast").click(function(){
                $("#myToast").toast('show');
            });
        });
    </script>
  </head>
  <body>
        <button type="button" class="btn btn-primary show-toast">Klik bro</button>
        <div class="toast" id="myToast" style="left: 50%; position: fixed; transform: translate(-50%, 0px); z-index: 9999;">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-grav"></i> Hai!</strong>
                <small>12 menit yang lalu</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                <div>Klik link untuk mengambil hadiah <a href="#">Click here!</a></div>
            </div>
        </div>
  </body>
</html>

Rata kanan

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 Toast</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".show-toast").click(function(){
                $("#myToast").toast('show');
            });
        });
    </script>
  </head>
  <body>
        <button type="button" class="btn btn-primary show-toast">Klik bro</button>
        <div class="toast" id="myToast" style="right: 0%; position: fixed; transform: translate(0%, 0px); z-index: 9999;">
            <div class="toast-header">
                <strong class="mr-auto"><i class="fa fa-grav"></i> Hai!</strong>
                <small>12 menit lalu</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                <div>selamat anda mendapat hadiah. <a href="#">klik disini!</a> untuk mendapat hadiah</div>
            </div>
        </div>
  </body>
</html>

Saya memasukkan CSS pada contoh perataan diatas dengan cara inline CSS. Cara memasukkan CSS jenis ini dengan cara menambahkan atribute style=”” pada tag yang akan diberi style css.

Sekian sedikit tutorial Toast bootstrap dari saya, teman – teman dapat kembangkan sesuai dengan kebutuhan website teman. Terima kasih

Toast Bootstrap: Bootstrap Tutorial #13

Dasar Toast

Menampilkan dan menyembunyikan Toast

Penempatan Toast (Align)

Webstress Tool: Pengertian – Contoh dan Fungsinya

Cara Memasukkan Gambar ke Dalam Power Point

You may also like