Sweet Alert 2 Nutzung

Sweet Alert 2 Nutzung

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

SweetAlert2 ist eine beliebte JavaScript-Bibliothek, die es Ihnen ermöglicht, benutzerfreundliche, anpassbare und optisch ansprechende Warnmeldungen zu Ihren Websites und Anwendungen hinzuzufügen. Durch das Angebot einer moderneren Alternative zu klassischen JavaScript-Warnungen trägt es zur Verbesserung der Benutzererfahrung bei. In diesem Artikel werden wir einen umfassenden Leitfaden von der grundlegenden Nutzung von SweetAlert2 bis hin zu seinen erweiterten Funktionen bieten.

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

1. 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:

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

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

Swal.fire('Hallo Welt!');

Dieser Code sagt „Hallo Welt!“ in der Mitte des Bildschirms. Es wird ein Warnfeld mit der Meldung und einer Schaltfläche „OK“ angezeigt.

Erstellen erweiterter Warnmeldungen mit SweetAlert2

Die wahre Stärke von SweetAlert2 liegt in seinen Anpassungsoptionen. Nachfolgend finden Sie einige Beispiele, die Sie zum Erstellen verschiedener Arten von Benachrichtigungen verwenden können:

• Titel und Text:

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

• Symbole:

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

SweetAlert2 bietet verschiedene Symbole wie 'Erfolg', 'Fehler', 'Warnung', 'Info' und 'Frage'.

• HTML-Inhalt:

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

• Tasten:

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'
    )
  }
})

In diesem Beispiel wird dem Benutzer eine Warnung angezeigt, die eine Bestätigung erfordert. Benutzer "Ja, löschen!" Wenn Sie auf die Schaltfläche klicken, wird eine weitere Warnung angezeigt, die angibt, dass der Vorgang erfolgreich war.

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