В современной веб-разработке уведомления и оповещения пользователей играют жизненно важную роль в повышении общего удобства работы пользователей. SweetAlert2 — это мощная библиотека JavaScript, которая позволяет разработчикам создавать привлекательные и настраиваемые оповещения. В этой статье мы рассмотрим несколько методов использования SweetAlert2 с примерами кода для создания потрясающих оповещений для ваших веб-приложений.

Метод 1: базовое оповещение
Самый простой способ использовать SweetAlert2 — создать базовое оповещение. Этот метод отображает простое сообщение с кнопкой «ОК» для отклонения оповещения.

Swal.fire("Hello!", "This is a basic alert.", "info");

Метод 2: оповещение о подтверждении
SweetAlert2 можно использовать для создания оповещений о подтверждении с помощью настраиваемых кнопок. Этот метод позволяет пользователям подтвердить или отменить действие.

Swal.fire({
  title: "Are you sure?",
  text: "This action cannot be undone.",
  icon: "warning",
  showCancelButton: true,
  confirmButtonColor: "#3085d6",
  cancelButtonColor: "#d33",
  confirmButtonText: "Yes, delete it!",
}).then((result) => {
  if (result.isConfirmed) {
    // Code to handle confirmed action
  } else {
    // Code to handle cancellation
  }
});

Метод 3: быстрое оповещение
SweetAlert2 также предоставляет быстрое оповещение, позволяющее пользователям вводить данные. Этот метод можно использовать для сбора информации о пользователе или получения данных для дальнейших действий.

Swal.fire({
  title: "Enter your name",
  input: "text",
  inputPlaceholder: "Your name",
  showCancelButton: true,
}).then((result) => {
  if (result.isConfirmed) {
    const name = result.value;
    // Code to handle user input
  }
});

Swal.fire({
  title: "<span style='color: #ff0000'>Attention!</span>",
  html: "<p>This is a customized alert.</p>",
  icon: "info",
  showCloseButton: true,
  showCancelButton: true,
  confirmButtonText: "OK",
  cancelButtonText: "Cancel",
  customClass: {
    title: "my-title-class",
    popup: "my-popup-class",
    confirmButton: "my-confirm-button-class",
    cancelButton: "my-cancel-button-class",
  },
});

SweetAlert2 — это универсальная библиотека JavaScript, которая позволяет разработчикам создавать визуально привлекательные и интерактивные оповещения для веб-приложений. В этой статье мы рассмотрели различные методы, включая базовые оповещения, оповещения с подтверждением, быстрые оповещения и настраиваемые оповещения. Используя возможности SweetAlert2, вы можете повысить вовлеченность пользователей и сделать их работу более интуитивно понятной.