Home » Bootstrap » Toast Bootstrap: Bootstrap Tutorial #13

Toast Bootstrap: Bootstrap Tutorial #13

by YogaBayu
by YogaBayu

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

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/[email protected]/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/[email protected]/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:

Perataansintak CSS
Rata Kirileft: 0%; position: fixed; transform: translate(0%, 0px); z-index: 9999;
Rata Tengahleft: 50%; position: fixed; transform: translate(-50%, 0px); z-index: 9999;
Rata kananright: 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/[email protected]/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/[email protected]/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/[email protected]/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

You may also like