Info-сообщения

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

Основное использование

Info-сообщение в SweetAlert визуально выделяется синим цветом и иконкой в виде буквы “i”. Его основная цель — предоставление информации в ненавязчивой форме. Простой пример создания такого сообщения:

Swal.fire({
  icon: 'info',
  title: 'Информация',
  text: 'Операция завершена успешно!'
});

Здесь:

  • icon: 'info' — указывает на тип окна, в данном случае информационное сообщение.
  • title: 'Информация' — задает заголовок окна.
  • text: 'Операция завершена успешно!' — основной текст сообщения.

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

Параметры и кастомизация

Существует множество параметров, которые можно использовать для настройки отображения info-сообщений, чтобы они выглядели наиболее соответствующими задачам интерфейса.

Заголовок и текст

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

Swal.fire({
  icon: 'info',
  title: 'Завершение загрузки',
  html: '<strong>Файл успешно загружен</strong><br>Теперь можно перейти к следующему шагу.'
});

Использование параметра html позволяет включать форматированный текст с элементами, такими как <strong>, <a>, <ul> и так далее. Однако стоит помнить, что использование HTML в сообщении может повлиять на безопасность, если не контролировать вводимые данные.

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

По умолчанию окно информационного сообщения имеет кнопку для закрытия с текстом “OK”. Однако можно легко изменить текст кнопки или добавить несколько кнопок с разными действиями.

Swal.fire({
  icon: 'info',
  title: 'Успех!',
  text: 'Операция завершена, нажмите кнопку для продолжения.',
  confirmButtonText: 'Продолжить'
});

Для более сложных взаимодействий можно добавить дополнительные кнопки с помощью параметра showCancelButton:

Swal.fire({
  icon: 'info',
  title: 'Подтверждение',
  text: 'Хотите продолжить?',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет'
});

Здесь будет показана дополнительная кнопка “Нет”, и пользователь сможет выбрать одно из двух действий.

Таймер автозакрытия

Для того чтобы info-сообщение закрывалось автоматически, можно использовать параметр timer, который указывает время в миллисекундах, через которое окно будет закрыто.

Swal.fire({
  icon: 'info',
  title: 'Загрузка...',
  text: 'Пожалуйста, подождите, пока данные обрабатываются.',
  timer: 3000
});

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

Swal.fire({
  icon: 'info',
  title: 'Обработка...',
  text: 'Дождитесь завершения операции.',
  timer: 5000,
  timerProgressBar: true
});
Преобразование иконки и стилей

Можно настроить внешний вид окна, включая цвета и шрифты. Для этого SweetAlert поддерживает параметр customClass, который позволяет применить свои стили. Например:

Swal.fire({
  icon: 'info',
  title: 'Важная информация',
  text: 'Ваши изменения были сохранены.',
  customClass: {
    title: 'my-custom-title',
    content: 'my-custom-content'
  }
});

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

Сложные компоненты

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

Пример использования формы с информационным сообщением:

Swal.fire({
  icon: 'info',
  title: 'Введите данные',
  html: `
    <input type="text" id="username" class="swal2-input" placeholder="Ваше имя">
  `,
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  preConfirm: () => {
    const username = Swal.getPopup().querySelector('#username').value;
    if (!username) {
      Swal.showValidationMessage('Пожалуйста, введите имя.');
      return false;
    }
    return { username: username };
  }
});

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

Поведение окна

SweetAlert позволяет детально настраивать поведение окна. Например, при открытии или закрытии окна можно задать различные анимации с помощью параметров showClass и hideClass.

Swal.fire({
  icon: 'info',
  title: 'Данные загружены',
  text: 'Ваши данные были успешно получены.',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
});

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

Ошибки и предупреждения

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

Swal.fire({
  icon: 'info',
  title: 'Предупреждение',
  text: 'Эта операция может занять длительное время. Пожалуйста, будьте терпеливы.',
  confirmButtonText: 'ОК'
});

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

Подытоживая

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

Оглавление