Sweet Alert 2 kullanımı

Web Sitelerinize Modern ve Etkileşimli Uyarılar Eklemenin Yolu

SweetAlert2, web sitelerinize ve uygulamalarınıza kullanıcı dostu, özelleştirilebilir ve görsel olarak çekici uyarı mesajları eklemenizi sağlayan popüler bir JavaScript kütüphanesidir. Klasik JavaScript uyarılarına göre daha modern bir alternatif sunarak, kullanıcı deneyimini iyileştirmenize yardımcı olur. Bu makalede, SweetAlert2’nin temel kullanımından ileri düzey özelliklerine kadar kapsamlı bir rehber sunacağız.

Neden SweetAlert2?

Görsel Çekicilik: SweetAlert2, varsayılan olarak göz alıcı ve modern bir tasarıma sahiptir. Bu sayede web sitenizin estetiğiyle uyumlu uyarılar oluşturabilirsiniz.
Özelleştirilebilirlik: Renkler, ikonlar, başlıklar, metinler ve butonlar gibi birçok öğeyi özelleştirerek uyarılarınızı kişiselleştirebilirsiniz.
Kullanıcı Dostu: Kullanıcıların dikkatini çeken animasyonlar ve etkileşimli öğeler sayesinde daha etkili uyarılar oluşturabilirsiniz.
Kolay Entegrasyon: SweetAlert2, JavaScript, React, Angular, Vue.js gibi popüler web geliştirme teknolojileriyle kolayca entegre edilebilir.

SweetAlert2’yi Kullanmaya Başlama

Kütüphaneyi Dahil Etme: SweetAlert2’yi kullanabilmek için öncelikle kütüphaneyi web sitenize veya uygulamanıza dahil etmelisiniz. Bunu <head> etiketleri arasına aşağıdaki <script> etiketini ekleyerek yapabilirsiniz:

HTML

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 

Temel Kullanım: SweetAlert2’nin temel kullanımı oldukça basittir. Aşağıdaki örnekte, “Merhaba Dünya!” mesajını içeren basit bir uyarı oluşturuyoruz:

JavaScript

Swal.fire('Merhaba Dünya!');

Bu kod, ekranda ortalanmış, “Merhaba Dünya!” mesajını içeren ve “Tamam” butonuna sahip bir uyarı kutusu gösterecektir.

SweetAlert2 ile İleri Düzey Uyarılar Oluşturma

SweetAlert2’nin gerçek gücü, özelleştirme seçeneklerinde yatmaktadır. Aşağıda, farklı türde uyarılar oluşturmak için kullanabileceğiniz bazı örnekler bulunmaktadır:

Başlık ve Metin:

JavaScript

Swal.fire({
  title: 'Başlık',
  text: 'Bu bir SweetAlert2 uyarısıdır!'
});

İkonlar:

JavaScript

Swal.fire({
  icon: 'success',
  title: 'Başarılı!',
  text: 'İşlem başarıyla tamamlandı.'
});

SweetAlert2, ‘success’ (başarı), ‘error’ (hata), ‘warning’ (uyarı), ‘info’ (bilgi) ve ‘question’ (soru) gibi farklı ikonlar sunar.

HTML İçeriği:

JavaScript

Swal.fire({
  title: '<strong>HTML</strong> <u>içeriği</u>',
  icon: 'info',
  html: 'Bu metin <b>kalın</b>, <u>altı çizili</u> ve <a href="#">link</a> içerir.',
  showCloseButton: true
});

Butonlar:

JavaScript

Swal.fire({
  title: 'Emin misiniz?',
  text: "Bu işlem geri alınamaz!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Evet, sil!',
  cancelButtonText: 'İptal'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Silindi!',
      'Dosyanız silindi.',
      'success'
    )
  }
})

Bu örnekte, kullanıcıya onay gerektiren bir uyarı gösteriliyor. Kullanıcı “Evet, sil!” butonuna tıkladığında, işlemin başarılı olduğunu belirten başka bir uyarı gösteriliyor.

SweetAlert2 ile Daha Fazlasını Yapın

SweetAlert2, bu makalede bahsedilenlerden çok daha fazla özellik sunar. Uyarıların görünümünü ve davranışını daha da özelleştirmek için resmi belgeleri inceleyebilirsiniz. Ayrıca, SweetAlert2 topluluğu tarafından oluşturulan birçok örnek ve eklenti bulunmaktadır.

SweetAlert2, web sitenizin veya uygulamanızın kullanıcı deneyimini önemli ölçüde iyileştirebilecek güçlü bir araçtır. Bu makalede verilen bilgileri kullanarak, etkileyici ve bilgilendirici uyarılar oluşturmaya başlayabilirsiniz.

Kaynakça:

https://github.com/mhtrkn/Mowatch

https://github.com/HasanHuseyinTopal/HotelMonitoring