Sweet Alert 2 kullanımı - Alper İLHAN

Sweet Alert 2 usage

The Way to Add Modern and Interactive Alerts to Your Websites

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.

Why SweetAlert2?

Visual Appeal: SweetAlert2 comes with a flashy and modern design by default. This allows you to create alerts that match the aesthetics of your website.
Customizability: You can personalize your alerts by customizing many elements such as colors, icons, titles, texts, and buttons.
User friendly: You can create more effective alerts thanks to animations and interactive elements that attract users' attention.
Easy Integration: SweetAlert2 can be easily integrated with popular web development technologies such as JavaScript, React, Angular, Vue.js.

Getting Started with SweetAlert2

Including the Library: To use SweetAlert2, you must first include the library in your website or application. You can do this by adding the following tag between the tags:

HTML

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

Basic Usage: Basic usage of SweetAlert2 is quite simple. In the example below, “Hello World!” We create a simple alert with the message:

JavaScript

Swal.fire('Hello world!');

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

Creating Advanced Alerts with SweetAlert2

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:

Title and Text:

JavaScript

Swal.fire({
  title: Title,
  text: 'This is a SweetAlert2 alert!'
});

Icons:

JavaScript

Swal.fire({
  icon: 'success',
  title: 'Successful!',
  text: 'The operation completed successfully.'
});

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

HTML Content:

JavaScript

Swal.fire({
  title: 'HTML content',
  icon: 'info',
  html: 'This text contains bold, underline and link.',
  showCloseButton: true
});

Buttons:

JavaScript

Swal.fire({
  title: 'Are you sure?',
  text: "This action cannot be undone!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete!',
  cancelButtonText: 'Cancel'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      '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.

Do More with SweetAlert2

SweetAlert2 offers many more features than those mentioned in this article. To further customize the appearance and behavior of alerts, you can review the official documentation. There are also many examples and plugins created by the SweetAlert2 community.

SweetAlert2 is a powerful tool that can significantly improve the user experience of your website or app. Using the information provided in this article, you can start creating impressive and informative alerts.

Source:

https://github.com/mhtrkn/Mowatch

https://github.com/HasanHuseyinTopal/HotelMonitoring