Кастомные иконки

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

Стандартные иконки

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

Пример кода с использованием стандартных иконок:

Swal.fire({
  title: 'Успех!',
  text: 'Операция выполнена успешно.',
  icon: 'success'
});

В этом примере используется стандартная иконка успеха. Возможные значения для параметра icon:

  • success — иконка успеха (галочка)
  • error — иконка ошибки (крест)
  • warning — иконка предупреждения (восклицательный знак)
  • info — иконка информации (буква “i”)
  • question — иконка вопроса (вопросительный знак)

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

Кастомная иконка через URL

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

Пример с кастомной иконкой:

Swal.fire({
  title: 'Собственная иконка',
  text: 'Это окно использует вашу иконку.',
  imageUrl: 'https://example.com/your-icon.png',
  imageWidth: 100,
  imageHeight: 100,
  imageAlt: 'Кастомная иконка'
});

В этом примере иконка подгружается с внешнего ресурса. Параметры imageWidth и imageHeight позволяют задавать размеры иконки. Параметр imageAlt используется для описания изображения, что важно для доступности.

Кастомизация стандартных иконок с использованием CSS

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

Пример настройки иконки с помощью CSS:

.swal2-icon.swal2-success .swal2-icon-content {
  color: #00ff00; /* Изменение цвета */
  font-size: 40px; /* Увеличение размера */
}

Этот код изменяет цвет и размер иконки успеха. Применение стилей для других типов иконок аналогично, достаточно изменить класс в селекторе (например, swal2-error, swal2-warning).

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

Иногда требуется вставить более сложные элементы, такие как SVG или даже HTML-контент, вместо простых изображений. SweetAlert позволяет вставить HTML-контент в модальное окно через параметр html. Это полезно, если нужно использовать не только изображения, но и элементы с более сложной структурой.

Пример с кастомной иконкой в формате SVG:

Swal.fire({
  title: 'SVG иконка',
  text: 'Это окно использует иконку в формате SVG.',
  html: '<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>',
  showCloseButton: true
});

Здесь в окне появляется иконка в формате SVG. Параметр html позволяет вставить произвольный HTML, что расширяет возможности кастомизации.

Анимация иконок

Для улучшения визуального восприятия можно добавить анимацию иконок. Это можно сделать с помощью CSS-анимаций. SweetAlert позволяет легко интегрировать анимации, благодаря возможности работы с классами, генерируемыми для иконок. Например, можно сделать иконку с эффектом “пульсации” при отображении окна.

Пример анимации иконки:

.swal2-icon {
  animation: pulse-animation 1s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Этот CSS-код заставляет иконку пульсировать, что привлекает внимание пользователя к окну с сообщением.

Совмещение иконок с действиями

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

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

Swal.fire({
  title: 'Действие с кастомной иконкой',
  text: 'Выберите один из вариантов.',
  imageUrl: 'https://example.com/custom-icon.png',
  imageWidth: 80,
  imageHeight: 80,
  showCancelButton: true,
  confirmButtonText: 'Подтвердить',
  cancelButtonText: 'Отменить'
});

Здесь иконка с кастомным изображением будет отображаться рядом с кнопками. Этот пример демонстрирует как легко можно интегрировать иконку в окно с дополнительными элементами управления.

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

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

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

Swal.fire({
  title: 'Фоновая иконка',
  text: 'Это окно использует изображение в качестве фона.',
  background: 'url(https://example.com/background-icon.png) no-repeat center center',
  showConfirmButton: false
});

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

Заключение

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

Оглавление