SweetAlert2 adalah pustaka JavaScript yang memberikan tampilan alert yang lebih menarik dibandingkan dengan alert bawaan browser. Dengan fitur kustomisasi yang fleksibel, kita dapat mengubah warna, ikon, animasi, hingga tampilan tombol agar sesuai dengan desain website kita.
1. Instalasi SweetAlert2
Sebelum menerapkan SweetAlert2, kita perlu menginstalnya terlebih dahulu.
a) Menggunakan CDN (Direkomendasikan)
Tambahkan baris berikut ke dalam file HTML Anda:
<head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>b) Menggunakan NPM (Untuk Proyek JavaScript)
Jika Anda menggunakan npm, jalankan perintah berikut:
npm install sweetalert2Kemudian impor SweetAlert2 dalam skrip JavaScript:
import Swal from 'sweetalert2';2. Membuat SweetAlert2 Sederhana
Setelah instalasi selesai, mari kita buat alert sederhana:
Swal.fire('Hello, World!');Kode di atas akan menampilkan popup sederhana dengan teks "Hello, World!".
3. Custom Styling pada SweetAlert2
Agar tampilan lebih menarik, kita bisa mengubah warna, ikon, dan gaya tombol.
a) Mengubah Warna dan Background
Swal.fire({
title: 'Selamat Datang!',
text: 'Ini adalah alert dengan background kustom.',
icon: 'success',
background: '#f4f4f4',
color: '#333',
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33'
});Kode ini akan mengubah background alert menjadi abu-abu muda dan menyesuaikan warna teks serta tombol.
b) Menambahkan Animasi
Swal.fire({
title: 'Animasi Keren!',
text: 'Alert ini memiliki animasi pop-in.',
icon: 'info',
showClass: {
popup: 'animate__animated animate__bounceIn'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
});Tambahkan pustaka Animate.css untuk menggunakan efek ini.
c) Menyesuaikan CSS dengan Kustom Class
Jika ingin mengubah gaya lebih lanjut, gunakan CSS kustom:
.swal2-popup {
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}Dan panggil di JavaScript:
Swal.fire({
title: 'Custom CSS!',
text: 'Menggunakan gaya CSS sendiri.',
customClass: {
popup: 'my-custom-class'
}
});4. Kesimpulan
Dengan SweetAlert2, kita dapat membuat tampilan alert yang lebih menarik dan interaktif dibandingkan dengan alert bawaan browser. Dengan sedikit kustomisasi, kita bisa membuat popup yang sesuai dengan tampilan website kita.
0 Comments