Swal.getActions()

Метод Swal.getActions() библиотеки SweetAlert используется для получения доступа к элементам действий внутри всплывающего окна. Эти действия включают кнопки подтверждения и отмены, которые являются основными элементами интерфейса в диалоговых окнах SweetAlert.

Описание метода

Swal.getActions() позволяет получить доступ к DOM-элементам, которые управляют действиями пользователя в модальном окне. В частности, этот метод возвращает массив элементов, представляющих кнопки (например, кнопки «ОК» или «Отмена») в модальном окне.

Рассмотрим типичный пример использования:

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

В этом примере всплывающее окно содержит две кнопки: «Да» и «Отмена». Метод Swal.getActions() позволяет получить доступ к этим кнопкам и манипулировать ими, например, изменять их стили, видимость или другие свойства.

Возвращаемое значение

Метод Swal.getActions() возвращает коллекцию DOM-элементов, которая представляет кнопки действия в модальном окне. В случае, если всплывающее окно не содержит кнопок действий, метод возвращает пустой массив.

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

Swal.fire({
  title: 'Проверка действий',
  text: 'Нажмите кнопку для взаимодействия',
  icon: 'info',
  showCancelButton: true
}).then(() => {
  const actions = Swal.getActions();
  console.log(actions); // выводит коллекцию элементов
});

Изменение внешнего вида кнопок

Одним из частых применений метода Swal.getActions() является изменение внешнего вида кнопок, например, изменение цвета фона или размеров кнопок после того, как всплывающее окно уже отобразилось.

Пример изменения стилей кнопки подтверждения:

Swal.fire({
  title: 'Изменение стилей кнопок',
  text: 'Нажмите кнопку для изменения стиля',
  icon: 'success',
  showCancelButton: true
}).then(() => {
  const actions = Swal.getActions();
  const confirmButton = actions[0]; // Кнопка "Подтвердить"
  confirmButton.style.backgroundColor = '#FF5733'; // меняем цвет фона кнопки
  confirmButton.style.fontSize = '18px'; // меняем размер шрифта
});

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

Применение при динамических изменениях

Метод Swal.getActions() полезен, если требуется динамически изменять состояние или внешний вид кнопок на основе пользовательского ввода или других событий в приложении. Например, можно добавить анимацию или изменить расположение кнопок в зависимости от условий:

Swal.fire({
  title: 'Динамическая анимация кнопок',
  text: 'Кнопки будут двигаться!',
  icon: 'info',
  showCancelButton: true
}).then(() => {
  const actions = Swal.getActions();
  const confirmButton = actions[0];
  confirmButton.style.transition = 'transform 0.5s ease-in-out';
  confirmButton.style.transform = 'translateX(100px)';
});

Этот пример демонстрирует анимацию кнопки подтверждения, которая будет перемещена вправо на 100 пикселей с плавным переходом.

Доступ к кнопке отмены

Для работы с кнопкой отмены можно использовать индекс 1 в массиве, возвращаемом методом Swal.getActions(). Этот индекс соответствует кнопке отмены, если она присутствует в диалоговом окне:

Swal.fire({
  title: 'Тестирование кнопки отмены',
  text: 'Попробуйте изменить стили этой кнопки',
  icon: 'warning',
  showCancelButton: true
}).then(() => {
  const actions = Swal.getActions();
  const cancelButton = actions[1]; // Кнопка "Отмена"
  cancelButton.style.border = '2px solid red'; // меняем стиль границы кнопки
});

Если в модальном окне нет кнопки отмены, метод Swal.getActions() вернет пустой массив, и попытка доступа к индексу 1 вызовет ошибку.

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

В SweetAlert можно определить кастомные кнопки, задав их через свойства confirmButtonText и cancelButtonText. Метод Swal.getActions() также позволяет взаимодействовать с этими кнопками, что важно при кастомизации внешнего вида или поведения.

Swal.fire({
  title: 'Использование кастомных кнопок',
  text: 'Нажмите кастомную кнопку',
  icon: 'success',
  confirmButtonText: 'Подтвердить действие',
  cancelButtonText: 'Отмена действия'
}).then(() => {
  const actions = Swal.getActions();
  const confirmButton = actions[0];
  confirmButton.style.backgroundColor = '#4CAF50'; // кастомизируем кнопки
});

Заключение

Метод Swal.getActions() предоставляет удобный способ взаимодействовать с элементами действий в модальных окнах SweetAlert, давая возможность изменять внешний вид и поведение кнопок после того, как окно уже отобразилось. Это расширяет возможности кастомизации и динамических изменений в интерфейсе без необходимости использовать сторонние библиотеки или сложные манипуляции с DOM.

Оглавление