Sweet Alert 2 kullanımı - Alper İLHAN

Sweet Alert 2 Nutzung

Der Weg, um Ihren Websites moderne und interaktive Warnmeldungen hinzuzufügen

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.

Warum SweetAlert2?

Visuelle Attraktivität: SweetAlert2 hat standardmäßig ein auffälliges und modernes Design. Dies ermöglicht es Ihnen, Warnmeldungen zu erstellen, die mit der Ästhetik Ihrer Website übereinstimmen.
Anpassungsfähigkeit: Sie können Ihre Warnmeldungen personalisieren, indem Sie viele Elemente wie Farben, Symbole, Titel, Texte und Schaltflächen anpassen.
Benutzerfreundlich: Dank Animationen und interaktiven Elementen, die die Aufmerksamkeit der Benutzer erregen, können Sie effektivere Benachrichtigungen erstellen.
Einfache Integration: SweetAlert2 kann problemlos in gängige Webentwicklungstechnologien wie JavaScript, React, Angular und Vue.js integriert werden.

Erste Schritte mit SweetAlert2

Einbinden der Bibliothek: Um SweetAlert2 verwenden zu können, müssen Sie zunächst die Bibliothek in Ihre Website oder Anwendung einbinden. Sie können dies tun, indem Sie das folgende -Tag zwischen den -Tags hinzufügen:

HTML

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

Grundlegende Verwendung: Die grundlegende Verwendung von SweetAlert2 ist recht einfach. Im Beispiel unten lautet „Hello World!“ Wir erstellen eine einfache Warnung mit der Nachricht:

JavaScript

Swal.fire('Hallo Welt!');

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

Erstellen erweiterter Warnmeldungen mit 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:

Titel und Text:

JavaScript

Swal.fire({
  title: Titel,
  text: 'Dies ist eine SweetAlert2-Warnung!'
});

Symbole:

JavaScript

Swal.fire({
  icon: 'success',
  title: 'Erfolgreich!',
  text: 'Der Vorgang wurde erfolgreich abgeschlossen.'
});

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

HTML-Inhalt:

JavaScript

Swal.fire({
  title: 'HTML Inhalt',
  icon: 'info',
  html: 'Dieser Text enthält Fett, Unterstrichen und Link.',
  showCloseButton: true
});

Tasten:

JavaScript

Swal.fire({
  title: 'Bist du sicher?',
  text: "Diese Aktion kann nicht rückgängig gemacht werden!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Ja, löschen!',
  cancelButtonText: 'Stornieren'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Gelöscht!',
      'Ihre Datei wurde gelöscht.',
      '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.

Machen Sie mehr mit SweetAlert2

SweetAlert2 bietet viel mehr Funktionen als die in diesem Artikel erwähnten. Um das Erscheinungsbild und Verhalten von Warnungen weiter anzupassen, können Sie die offizielle Dokumentation lesen. Es gibt auch viele Beispiele und Plugins, die von der SweetAlert2-Community erstellt wurden.

SweetAlert2 ist ein leistungsstarkes Tool, das die Benutzererfahrung Ihrer Website oder App erheblich verbessern kann. Mithilfe der in diesem Artikel bereitgestellten Informationen können Sie mit der Erstellung überzeugender und informativer Benachrichtigungen beginnen.

Quelle:

https://github.com/mhtrkn/Mowatch

https://github.com/HasanHuseyinTopal/HotelMonitoring