#Bootstrap 4

Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

By Diki Alfarabi Hadi
9 September 2019
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.

<strong class="mr-auto">Notifikasi</strong>

<small>1 menit yang lalu</small>

</button>

</div>

Halo, ini pesan notifikasi toast.

<br/>

www.malasngoding.com

</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.

$('.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.

<!doctype html>

<html>

<head>

<title>Tutorial Toasts Dengan Bootstrap 4 - www.malasngoding.com</title>

</head>

<body>

<h3>Tutorial Toasts Dengan Bootstrap 4</h3>

<h4><a href="https://www.malasngoding.com/toasts-bootstrap-4/">www.malasngoding.com</a></h4>

</center>

<strong class="mr-auto">Notifikasi</strong>

<small>1 menit yang lalu</small>

</button>

</div>

Halo, ini pesan notifikasi toast.

<br/>

www.malasngoding.com

</div>

$('.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.

<strong class="mr-auto">Bootstrap</strong>

</button>

</div>

Halo, ini pesan notifikasi toast.

<br/>

www.malasngoding.com

</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.

<strong class="mr-auto">Notifikasi 1</strong>

<small>1 menit yang lalu</small>

</button>

</div>

Halo, ini pesan notifikasi pertama.

<br/>

www.malasngoding.com

</div>

<strong class="mr-auto">Notifikasi 2</strong>

<small>1 menit yang lalu</small>

</button>

</div>

Halo, ini pesan notifikasi kedua.

<br/>

www.malasngoding.com

</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.

DEMO

Download Source Code

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.