Panduan Lengkap: Cara Menggunakan dan Kustomisasi SweetAlert2 dengan Mudah

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 sweetalert2

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

bocah Mluis

Search This Blog