Sweet Alert2
Sweet Alert2 Pop Up Çeşitleri
- Basit Mesaj
- Başlıklı Mesaj
- Resimli Pop Up
- Sayfada Konumu Belirtilen Pop Up
- Custom HTML Eklenebilen Pop Up
- Onay Almak İçin Pop Up
- Animasyonlu Açılıp Kapanan Pop Up
Sweet Alert2 Javascript dilinde yazılmış responsive ve düzenlenebilir, açık kaynak kodlu bir pop up kütüphanesidir.
Hem kolay entegrasyonu hem tasarımı hem de fonksiyonelliği ile çok fazla web sitesi üzerinde aktif olarak kullanılıyor ve sürekli güncellenerek geliştiriliyor.
Web sayfalarında bir işlem sonrası hata ve onay mesajlarında, form alanlarındaki butonlarda veya herhangi bir event sonrası pop up mesajlarında sweetalert2 işi oldukça kolaylaştırıyor.
Tarayıcının varsayılan Javascript sayfa pop up mesajı aşağıdaki örnekte olduğu gibi daha ilkel bir yapıdır. Sweet Alert2 pop up mesajı ise göze daha hoş görünen ve dikkat çekici bir yapıdır.
Sweet Alert2 Kodlarının Sayfaya Eklenmesi
Kütüphanedeki kodların aktifleşmesi için aşağıdaki script’in web sitesine eklenmesi gerekiyor.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>Veya CSS ve JS kodlarını aşağıdaki scriptler ile ayrı ayrı da ekleyebilirsiniz.
<head></head> etiketleri arasına eklenecek CSS kodu:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">Sayfaya eklenecek script kodu (Sayfanın alt bölümüne eklenmesi site hızı açısından avantajlı olur):
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>Sweet Alert2 Kullanımı
Basit Mesaj
Sadece basit bir mesaj içeren pop up.
Swal.fire('Any fool can use a computer')
Başlıklı Mesaj
Başlık ve açıklama metni içeren pop up mesajı.
Swal.fire(
'Junior to Expert',
'juniortoexpert.com',
'success'
)‘success’ alanına girilen değer ile açılan pop up üzerindeki ikon belirleniyor. ‘success’, ‘error’, ‘warning’, ‘info’, ‘question’ olarak 5 farklı ikon seneçeği mevcut.
Resimli Pop Up
Pop up içerisinde resim içeren mesaj türü. “imageURL” attribute’u ile resmin linki, “imageWidth” ve “imageHeight” ile resmin genişliği-yüksekliği, “imageAlt” ile de resmin alt etiketi belirtilir.
Swal.fire({
title: 'Junior to Expert!',
text: 'juniortoexpert.com Sweet Alert2',
imageUrl: 'https://juniortoexpert.com/wp-content/uploads/juniortoexpert.jpeg',
imageWidth: 400,
imageHeight: 400,
imageAlt: 'Junior to Expert',
})
Sayfada Konumu Belirtilen Pop Up
“position” değeri ile sayfada açılan pop up istenilen konuma yerleştirilebilir. Pop up penceresinin sayfada konumlanmasını sağlayan değerler;
- “top”,
- “top-start”,
- “top-end”,
- “center”,
- “center-start”,
- “center-end”,
- “bottom”,
- “bottom-start”,
- “bottom-end”
Swal.fire({
position: 'top-start',
icon: 'success',
title: 'Junior to Expert',
showConfirmButton: false,
timer: 1500
})timer: değeri ile açılan pop up penceresinin görünür kalma süresi belirlenebiliyor. Zamanlayıcı olduğu için pencereyi kapatma butonuna gerek kalmadığından showConfirmButton: false değeri ile buton pasifleştiriliyor.
Custom HTML Eklenebilen Pop Up
html: değeri ile açılan pop up penceresi içerisine istenilen HTML kurgusu yerleştirilebiliyor.
Swal.fire({
title: 'Junior to Expert',
icon: 'info',
html:
'Sweet Alert2 Javascript pop up kütüphanesi ' +
'<a href="https://juniortoexpert.com">juniortoexpert.com</a>',
showCloseButton: true,
showCancelButton: true
})Onay Almak İçin Pop Up
Bir işlem için kullanıcıdan onay alan pop up tipi.
Swal.fire({
title: 'Emin misin?',
text: "Bu işlemi geri alamazsın!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Evet, eminim!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Silindi!',
'Onay verdiğiniz dosya silindi.',
'success'
)
}
})Animasyonlu Açılıp Kapanan Pop Up
Pop up penceresi açılırken ve kapanırken animasyon kullanımı showClass ve hideClass değerleri ile sağlanır.
Swal.fire({
title: 'Junior to Expert',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
})Not: Animasyon Animate.css desteği ile birlikte çalışıyor, Animate.css kodları sayfaya eklenmeden animasyon aktifleşmiyor.
Sweetalert2 İkonları
Pop up mesajlarında aşağıdaki gibi ikonları belirtmek için kod alanında “icon:” özelliğini “success”, “error”, “warning”, “info”, “question” değişkenleri kullanılır.
Success
Error
Warning
Info
Question
Kaynakça: https://sweetalert2.github.io/