Alert sendiri adalah sebuah notifikasi, atau pesan yang tampil ketika suatu proses terjadi, misal jika gagal, berhasil maka sesuatu pesan akan muncul dan memberitahu kita apakah kita gagal atau berhasil, dan jika sebelumnya alert bisa kita buat dengan menggunakan method alert, confirm, prompt tetapi itu semua bawaan dari javascriptnya ya, tampilanya pun apa adanya ya, dan disini kita akan belajar cara membuat alert yang ada di bootstrap vue, tampilanya pun pastinya akan sedikit berbeda ya, oke seperti apa simak terus ya teman-teman.

Bedanya alert menggunakan alert di bootstrap vue adalah tentunya efek yang di tampilkan akan cantik beserta efek-efek yang di dapatkan karena disini ada embel-embel vue js dimana vue js sendiri adalah sebuah framework dari sebuah javascript ya, jadi tidak seperti di bootstrap juga, walaupun di bootstrap sudah ada tampilan alert tetapi itu hanya tampilan saja ya teman-teman, dengan bootstrap vue ini juga teman-teman tidak hanya mendapatkan tampilan tetapi prosesnya dari menampilkan dan menghilangkan, oke langsung saja.

Seperti biasa disini saya menggunakan vue cli ya, jadi teman-teman harus sudah menginstallnya, lalu jangan lupa npm bootstrapnya di install juga ya, oke sekarang kita lihat ada beberapa contoh yang saya ingin tampilkan, dan disin saya juga akan menjelaskan efek dari bootstrap vue tersebut.

untuk membuat sebuah alert teman-teman bisa gunakan b-alert ya, lalu untuk menamplilkan teman-teman bisa gunakan attribut show, bisa juga memberikan sebuah warna pada alertnya dengan sebuah variant, ada dismissible itu untuk menampilka button close ketika inginĀ  menutup buttonya, lalu disini kita bisa menampilkan dan menutupnya secara otomatis, ada dismiss-count-down itu untuk menghitung mundur, oke jika kita melihat hasilnya akan seperti ini

Cara Membuat Alert di Bootstrap Vue

Cara Membuat Alert di Bootstrap Vue

Cara Membuat Alert di Bootstrap Vue

oke itulah hasil dari kodingan di atas, dimana ada alert standart, alert dengan tombol dan alert yang yang akan hilang ketika 10 detik, oke saya rasa cukup sampai disini belajar kita tentang Cara Membuat Alert di Bootstrap Vue semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

WhatsApp chat