07/11/2021

Sweet Alert2

Sweet Alert2

Sweet Alert2 Pop Up Çeşitleri

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/[email protected]/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/[email protected]/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/[email protected]/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

i


Question

?


Kaynakça: https://sweetalert2.github.io/