Дополнительная третья кнопка

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

Создание третьей кнопки

Для того чтобы добавить дополнительную кнопку в диалоговое окно, необходимо использовать параметр buttons. В объекте кнопок можно задать не только два стандартных варианта, но и третий, который будет выполнять уникальное действие.

Пример простого использования третьей кнопки:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие нельзя будет отменить.',
  icon: 'warning',
  showCancelButton: true,
  showDenyButton: true,
  confirmButtonText: 'Подтвердить',
  denyButtonText: 'Отменить',
  cancelButtonText: 'Не делать ничего',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Подтверждено');
  } else if (result.isDenied) {
    console.log('Отменено');
  } else if (result.isDismissed) {
    console.log('Ничего не сделано');
  }
});

В данном примере используется три кнопки:

  1. Подтвердить — выполняет основное действие.
  2. Отменить — отклоняет действие.
  3. Не делать ничего — пользователь может закрыть окно без выбора.

Ключевыми параметрами в этом примере являются showCancelButton, showDenyButton, которые показывают дополнительные кнопки, и cancelButtonText, denyButtonText, которые задают их текст.

Обработка результата нажатия на третью кнопку

После того как пользователь нажимает одну из кнопок, можно обработать результат с помощью объекта result, который возвращает информацию о том, какая кнопка была нажата.

  • result.isConfirmed — возвращает true, если была нажата кнопка подтверждения.
  • result.isDenied — возвращает true, если была нажата кнопка отказа.
  • result.isDismissed — возвращает true, если была нажата третья кнопка, закрывающее окно.

Этот механизм позволяет гибко управлять действиями пользователя в зависимости от выбранной опции.

Настройка дополнительных кнопок с разными стилями

SweetAlert позволяет не только добавить дополнительные кнопки, но и настроить их внешний вид. Для этого можно использовать CSS классы для каждой кнопки, задав параметры стиля в объекте настроек.

Пример:

Swal.fire({
  title: 'Выберите опцию',
  text: 'Дополнительная кнопка имеет индивидуальный стиль.',
  icon: 'question',
  showCancelButton: true,
  showDenyButton: true,
  confirmButtonText: 'Да, подтверждаю',
  denyButtonText: 'Нет, отменить',
  cancelButtonText: 'Пропустить',
  customClass: {
    confirmButton: 'btn-confirm',
    denyButton: 'btn-deny',
    cancelButton: 'btn-cancel'
  }
});

В данном случае на каждую кнопку можно задать свой класс, который определяет внешний вид. Например, классы btn-confirm, btn-deny, и btn-cancel можно стилизовать через CSS:

.btn-confirm {
  background-color: green;
  color: white;
}

.btn-deny {
  background-color: red;
  color: white;
}

.btn-cancel {
  background-color: gray;
  color: white;
}

Такой подход дает гибкость в настройке интерфейса и помогает выделить кнопки визуально в зависимости от их назначения.

Взаимодействие с дополнительной кнопкой через Promise

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

Для обработки третьей кнопки можно использовать конструкцию .then(), проверяя, какая кнопка была нажата:

Swal.fire({
  title: 'Выберите действие',
  text: 'Это важное решение.',
  icon: 'info',
  showCancelButton: true,
  showDenyButton: true,
  confirmButtonText: 'Подтвердить',
  denyButtonText: 'Отказаться',
  cancelButtonText: 'Закрыть',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Подтверждено');
  } else if (result.isDenied) {
    console.log('Отказано');
  } else if (result.isDismissed) {
    console.log('Окно закрыто');
  }
});

В этом примере, в зависимости от выбранной кнопки, будет выполняться различный код. Если нажата третья кнопка (закрыть окно), возвращается result.isDismissed, что позволяет завершить обработку без выполнения других действий.

Вывод

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

Оглавление