Кастомные классы для кнопок

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

Установка кастомных классов для кнопок

В SweetAlert можно добавить кастомные классы к кнопкам через параметры buttons. Каждый объект кнопки принимает несколько свойств, одно из которых — это className, где можно указать имя CSS-класса. В случае использования нескольких кнопок можно установить индивидуальные стили для каждой из них.

Пример настройки кастомных классов:

Swal.fire({
  title: 'Подтвердите действие',
  text: 'Вы уверены, что хотите продолжить?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  customClass: {
    confirmButton: 'btn-confirm',
    cancelButton: 'btn-cancel'
  }
});

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

Стиль кнопок с использованием кастомных классов

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

Пример CSS-стилей для кастомных классов:

/* Кнопка подтверждения */
.btn-confirm {
  background-color: #4CAF50;
  color: white;
  border: 2px solid #4CAF50;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-confirm:hover {
  background-color: #45a049;
}

/* Кнопка отмены */
.btn-cancel {
  background-color: #f44336;
  color: white;
  border: 2px solid #f44336;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-cancel:hover {
  background-color: #e53935;
}

В данном примере кнопка подтверждения будет зелёной, а кнопка отмены — красной. Также используется плавный переход при наведении курсора.

Интерактивные элементы и анимации

SweetAlert позволяет не только изменять внешний вид кнопок, но и добавлять к ним различные анимации. Например, можно настроить эффект «нажатия» при клике на кнопку, изменяя её состояние в момент взаимодействия с пользователем.

Для этого в CSS можно добавить анимацию при нажатии кнопки:

/* Кнопка подтверждения с эффектом нажатия */
.btn-confirm:active {
  transform: scale(0.95);
}

/* Кнопка отмены с эффектом нажатия */
.btn-cancel:active {
  transform: scale(0.95);
}

Эти стили создают эффект сжатия кнопки, что делает взаимодействие с пользователем более живым.

Дополнительные кастомизации

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

Для использования иконок в кнопках можно использовать библиотеки, такие как Font Awesome. Для этого достаточно добавить соответствующие теги в HTML-контент кнопки:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие нельзя отменить.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '<i class="fa fa-check"></i> Подтвердить',
  cancelButtonText: '<i class="fa fa-times"></i> Отмена',
  customClass: {
    confirmButton: 'btn-confirm',
    cancelButton: 'btn-cancel'
  }
});

В этом примере кнопки будут содержать иконки из Font Awesome, добавляя визуальную привлекательность и облегчая восприятие интерфейса.

Взаимодействие с событиями

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

Пример обработки клика по кнопке:

Swal.fire({
  title: 'Подтвердите ваше действие',
  text: 'Вы хотите выполнить это действие?',
  icon: 'info',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена',
  customClass: {
    confirmButton: 'btn-confirm',
    cancelButton: 'btn-cancel'
  },
  didOpen: () => {
    const confirmButton = document.querySelector('.btn-confirm');
    confirmButton.addEventListener('click', () => {
      console.log('Действие подтверждено');
    });
  }
});

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

Заключение

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

Оглавление