Параметр customClass

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

Параметр customClass представляет собой объект, в котором ключи соответствуют различным частям модального окна, а значения — это имена CSS-классов, которые будут применяться к этим частям. Это предоставляет гибкость и контроль над стилями каждого элемента модального окна без необходимости вмешиваться в структуру самого компонента.

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

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

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

Состав объекта customClass

Каждый объект customClass может содержать различные ключи, которые соответствуют определённым частям модального окна. Рассмотрим наиболее часто используемые из них:

1. title

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

Пример:

Swal.fire({
  title: 'Ошибка',
  text: 'Не удалось загрузить данные',
  icon: 'error',
  customClass: {
    title: 'error-title'
  }
});

CSS:

.error-title {
  color: red;
  font-size: 24px;
  text-align: center;
}

2. content

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

Пример:

Swal.fire({
  title: 'Информация',
  text: 'Ваши данные успешно обновлены',
  customClass: {
    content: 'info-content'
  }
});

CSS:

.info-content {
  font-size: 18px;
  color: green;
}

3. confirmButton

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

Пример:

Swal.fire({
  title: 'Подтверждение',
  text: 'Вы уверены, что хотите удалить файл?',
  icon: 'warning',
  customClass: {
    confirmButton: 'delete-button'
  }
});

CSS:

.delete-button {
  background-color: red;
  color: white;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

4. cancelButton

Параметр cancelButton работает аналогично confirmButton, но применяется для кнопки отмены. Важно, что эта кнопка появляется только в тех случаях, когда используется параметр showCancelButton: true.

Пример:

Swal.fire({
  title: 'Отмена операции',
  text: 'Вы хотите отменить изменения?',
  icon: 'question',
  showCancelButton: true,
  customClass: {
    cancelButton: 'cancel-button'
  }
});

CSS:

.cancel-button {
  background-color: grey;
  color: white;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

5. image

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

Пример:

Swal.fire({
  title: 'Предупреждение',
  text: 'Невозможно загрузить файл',
  icon: 'warning',
  imageUrl: 'path/to/image.jpg',
  customClass: {
    image: 'custom-image'
  }
});

CSS:

.custom-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Это основной контейнер модального окна. Он применяется для настройки внешнего вида всего модального окна, включая фон, рамки, размеры и т.д.

Пример:

Swal.fire({
  title: 'Сообщение',
  text: 'Это кастомизированное окно',
  customClass: {
    popup: 'custom-popup'
  }
});

CSS:

.custom-popup {
  border-radius: 15px;
  background-color: #f0f0f0;
}

Применение нескольких классов

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

Пример:

Swal.fire({
  title: 'Готово!',
  text: 'Данные успешно сохранены',
  customClass: {
    confirmButton: 'btn primary large'
  }
});

CSS:

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}

.primary {
  background-color: #007bff;
  color: white;
}

.large {
  font-size: 18px;
}

Динамическая настройка классов

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

Пример:

let isError = true;
Swal.fire({
  title: isError ? 'Ошибка' : 'Успех',
  text: isError ? 'Что-то пошло не так' : 'Операция выполнена успешно',
  customClass: {
    title: isError ? 'error-title' : 'success-title',
    content: isError ? 'error-content' : 'success-content'
  }
});

Особенности и ограничения

  1. Использование с CSS-системами: Важно помнить, что при использовании кастомных классов с фреймворками, такими как Bootstrap или Materialize, может потребоваться настройка для корректного отображения. Например, классы кнопок или заголовков могут перекрывать стандартные стили этих библиотек.

  2. Совместимость с анимациями: Можно использовать классы, чтобы добавлять анимации или переходы. Однако, следует убедиться, что анимации не конфликтуют с теми, которые предусмотрены самой библиотекой SweetAlert.

  3. Поддержка пользовательских стилей: Параметр customClass не позволяет изменять такие аспекты модального окна, как размеры или положение. Для таких настроек нужно использовать другие методы, такие как глобальные стили или настройка параметров через CSS.

Использование параметра customClass позволяет детально настроить внешний вид модальных окон, делая их соответствующими дизайну приложения и улучшая пользовательский опыт.

Оглавление