Кнопки подтверждения

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

Основы работы с кнопками

По умолчанию, SweetAlert предоставляет две кнопки в модальном окне: Ок и Отмена. Эти кнопки позволяют пользователю подтвердить или отменить действие. Кнопка “Ок” обычно используется для подтверждения, а кнопка “Отмена” — для отказа от операции. Оба элемента могут быть настроены для изменения текста, стилей, а также функционала.

Пример базовой конфигурации с кнопками подтверждения:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Данное действие невозможно отменить.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Действие подтверждено');
  } else {
    console.log('Действие отменено');
  }
});

В этом примере создается диалог с двумя кнопками: “Да, удалить” и “Отмена”. Результат действия зависит от того, какая кнопка была нажата. Метод then используется для обработки результата, где result.isConfirmed указывает, была ли нажата кнопка подтверждения.

Кастомизация кнопок

SweetAlert позволяет значительно изменять внешний вид и поведение кнопок. Помимо стандартных параметров confirmButtonText и cancelButtonText, существует возможность настроить стили кнопок через параметры confirmButtonColor и cancelButtonColor. Это позволяет создавать более гармоничные и подходящие под дизайн интерфейса кнопки.

Пример кастомизации цвета кнопок:

Swal.fire({
  title: 'Удалить файл?',
  text: 'Вы уверены, что хотите удалить этот файл?',
  icon: 'error',
  showCancelButton: true,
  confirmButtonText: 'Удалить',
  cancelButtonText: 'Отмена',
  confirmButtonColor: '#ff6347', // Красный цвет для кнопки подтверждения
  cancelButtonColor: '#4caf50',  // Зеленый цвет для кнопки отмены
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Файл удален');
  } else {
    console.log('Удаление отменено');
  }
});

Программное управление кнопками

Кроме стандартных кнопок, библиотека предоставляет возможность создавать дополнительные кастомные кнопки с помощью параметра buttons. Этот параметр позволяет добавить любое количество кнопок с собственным поведением и стилями.

Пример с добавлением дополнительной кнопки:

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

Здесь используется не только кнопка подтверждения и отмены, но и кнопка “Отменить”, которая добавляется через параметр showDenyButton. Это расширяет возможности взаимодействия с пользователем, позволяя предложить более широкий выбор.

Взаимодействие с обработчиками событий

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

Пример с обработчиком события для кнопок:

Swal.fire({
  title: 'Сохранить изменения?',
  text: 'Вы хотите сохранить изменения перед выходом?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Сохранить',
  cancelButtonText: 'Не сохранять',
}).then((result) => {
  if (result.isConfirmed) {
    alert('Изменения сохранены');
  } else if (result.isDismissed) {
    alert('Изменения не сохранены');
  }
});

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

Управление отображением кнопок

В некоторых случаях можно захотеть динамически управлять видимостью кнопок. SweetAlert предоставляет параметры showCancelButton, showDenyButton и showConfirmButton, которые позволяют включать или скрывать кнопки в зависимости от контекста.

Пример скрытия кнопки:

Swal.fire({
  title: 'Удалить файл?',
  text: 'Вы не сможете отменить это действие.',
  icon: 'warning',
  showCancelButton: false,
  confirmButtonText: 'Удалить',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Файл удален');
  }
});

В этом примере кнопка “Отмена” скрыта, и осталась только кнопка подтверждения.

Заключение

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

Оглавление