Tampilan alert biasanya kita pakai untuk sebuah notifikasi, tampilan alert, mengetahui apakah sudah berhasil atau belum dan sebagainya, dan yang jelas pada artikel ini kita akan membahas alert tetapi bukan alert dari method ya tetapi bawaan dari suatu framework, framework apa itu, dan bagaimana cara mempercantik tampilan alert, simak terus ya teman-teman.

Untuk tampilan alert saya juga pernah menemukannya di bootstrap, tetapi yang membedakan disini ketika kita memasukan type alertnya dia akan munculkan warna dan icon sesuai jenis typenya, kira-kira apakah teman-teman tau saya menggunakan apa ? ya benar disini saya menggunakan vuetify, masih sama seperti kemarin ya, dengan vuetify ketika kita ingin mempecantik tampilan alert seperti memasukan icon, kita hanya perlu memasukan type alertnya apa.

langsung saja caranya cukup simple, ketika kita ingin menggunakannya, kita hanya perlu tag <v-alert dan masukan attributenya disini> seperti ini

  • v-model: itu adalah ketika kita ingin menampilkan alert maka v-model alert harus berisikan value true
  • type success: disini saya akan memberikan jenis type success dimana nantinya ada warna hijau dan jenis-jenis type successnya, sebenarnya ada 3 lagi ya, nanti saya tuliskan sisanya,
  • dan dismissible: adalah kita akan memberika button close di samping kanan untuk menutup alertnya

oke langsung saja ini adalah kode fullnya, silahkan teman-teman copy saja disini saya mencontohkan alert yang lain.

dan karena disini kasusnya saya akan memberikan button, jadi ketika button itu saya klik maka alert muncul, ketika saya click lagi button itu akan menutup seperti itu, dan scriptnya hanya seperti ini

jika teman-teman berhasil membuat cara mempercantik tampilan alert maka akan menampilkan tampilan seperti ini:

cara mempercantik tampilan alert

jika teman-teman lihat pada type error saya menggunakan attribute outline jadi tampilanya tidak ada background tetapi menampilkan efek background warna merah, dan saya rasa cuku sampai disini belajar kita tentang cara mempercantik tampilan alert, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.