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

Метод 1: базовое оповещение
Базовый метод SweetAlert отображает простое окно оповещения с сообщением. Вот пример того, как его использовать:

swal("Hello, World!");

Метод 2: оповещение с заголовком
Вы можете добавить заголовок в поле оповещения, используя параметр title. Вот пример:

swal("Good job!", "You clicked the button!", "success");

Метод 3: настройка кнопок
SweetAlert позволяет настраивать кнопки, отображаемые в окне оповещения. Вы можете указать текст, стиль и даже добавить обработчики событий. Вот пример:

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this file!",
  icon: "warning",
  buttons: {
    cancel: {
      text: "Cancel",
      value: null,
      visible: true,
      className: "",
      closeModal: true,
    },
    confirm: {
      text: "Delete",
      value: true,
      visible: true,
      className: "",
      closeModal: true
    }
  },
});

Метод 4: объединение оповещений в цепочку
SweetAlert предоставляет удобный способ последовательного отображения нескольких оповещений. Вы можете объединить оповещения, используя метод .then(). Вот пример:

swal("Step 1")
  .then(() => {
    return swal("Step 2");
  })
  .then(() => {
    return swal("Step 3");
  })
  .then(() => {
    swal("Done", "Tutorial completed successfully!", "success");
  });

Метод 5: синтаксис Async/Await
Если вы предпочитаете использовать синтаксис async/await, SweetAlert также поддерживает его. Вот пример:

async function showAlert() {
  await swal("Hello, World!");
  await swal("Good job!", "You clicked the button!", "success");
}
showAlert();

Не забудьте изучить документацию SweetAlert, чтобы узнать о более продвинутых функциях и возможностях настройки. Приятного кодирования!