Тип info

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

Создание уведомления типа info осуществляется через объект конфигурации Noty:

new Noty({
    type: 'info',
    text: 'Это информационное сообщение',
    timeout: 3000,
    progressBar: true,
    layout: 'topRight',
    theme: 'mint'
}).show();
  • type: ‘info’ — ключевой параметр, указывающий на тип уведомления.
  • text — текст сообщения. Может содержать HTML, если требуется форматирование.
  • timeout — время отображения уведомления в миллисекундах. Установка false делает уведомление постоянным до закрытия пользователем.
  • progressBar — отображение индикатора оставшегося времени.
  • layout — расположение уведомления на экране (topLeft, topRight, bottomLeft, bottomRight, topCenter, bottomCenter).
  • theme — визуальный стиль уведомления (mint, relax, metroui, sunset и др.).

Настройка длительности и поведения

Уведомления info часто используют для кратких информационных подсказок. Можно управлять временем их показа и способами закрытия:

new Noty({
    type: 'info',
    text: 'Загрузка данных завершена',
    timeout: 5000,
    progressBar: true,
    closeWith: ['click', 'button']
}).show();
  • closeWith — массив способов закрытия уведомления (click, button, hover).
  • timeout управляет автоматическим закрытием. Если требуется, чтобы уведомление исчезало через 3–5 секунд, достаточно задать значение 3000–5000.

HTML и стилизация текста

Тип info поддерживает HTML внутри текста, что позволяет добавлять ссылки, выделения и форматирование:

new Noty({
    type: 'info',
    text: 'Информация доступна <a href="/docs">в документации</a>',
    timeout: 4000
}).show();

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

Пользовательские кнопки

Можно добавлять кнопки к уведомлениям info для интерактивного взаимодействия:

new Noty({
    type: 'info',
    text: 'Хотите перейти к настройкам?',
    timeout: false,
    buttons: [
        Noty.button('Да', 'btn btn-success', function() {
            window.location.href = '/settings';
        }),
        Noty.button('Нет', 'btn btn-error', function(notyInstance) {
            notyInstance.close();
        })
    ]
}).show();
  • buttons — массив кнопок с текстом, классами и функциями-обработчиками.
  • Уведомление с кнопками обычно timeout: false, чтобы дать пользователю время принять решение.

Анимация появления и скрытия

Noty позволяет настроить анимацию через параметры animation:

new Noty({
    type: 'info',
    text: 'Событие произошло',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    },
    timeout: 3000
}).show();
  • Можно использовать CSS-анимации, подключив библиотеку animate.css или собственные классы.
  • Анимация повышает визуальную привлекательность уведомлений, особенно для информационных сообщений, которые не требуют критического внимания.

Применение в реальных сценариях

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

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

Взаимодействие с другими типами уведомлений

Уведомления info гармонично сочетаются с типами success, error, warning, создавая визуальную систему приоритетов:

  • success — положительный результат действия;
  • error — критическая ошибка или недопустимое действие;
  • warning — потенциальная опасность или важное предупреждение;
  • info — нейтральная информация или подсказка.

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

Важные рекомендации по использованию

  • Использовать умеренно: информационные уведомления должны быть полезными и не отвлекать.
  • Поддерживать единый стиль и расположение на всех страницах приложения.
  • Применять HTML только там, где это действительно повышает читаемость и взаимодействие.
  • Для интерактивных уведомлений с кнопками отключать автоматическое закрытие (timeout: false).

Использование уведомлений типа info в Noty обеспечивает чистую, понятную и ненавязчивую подачу информации, повышая удобство и взаимодействие с пользователем.

Оглавление