Информационные уведомления (info)

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

В библиотеке iziToast такие уведомления визуально отличаются спокойной цветовой схемой (чаще всего синие оттенки) и отсутствием агрессивных акцентов.

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

Минимальный пример создания информационного уведомления:

iziToast.info({
    title: 'Информация',
    message: 'Данные успешно загружены'
});

Ключевые параметры:

  • title — заголовок уведомления
  • message — основной текст
  • position — положение на экране (по умолчанию topRight)
  • timeout — время отображения (в миллисекундах)

Позиционирование уведомлений

Параметр position управляет размещением уведомления:

iziToast.info({
    title: 'Подсказка',
    message: 'Файл доступен для скачивания',
    position: 'bottomLeft'
});

Доступные значения:

  • topRight
  • topLeft
  • topCenter
  • bottomRight
  • bottomLeft
  • bottomCenter

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

Управление временем отображения

По умолчанию уведомление исчезает автоматически. Это поведение регулируется параметром timeout:

iziToast.info({
    title: 'Автосохранение',
    message: 'Изменения сохранены',
    timeout: 3000
});
  • 0 — уведомление не исчезает автоматически
  • любое положительное число — длительность показа

Интерактивные уведомления

Информационные сообщения могут включать кнопки:

iziToast.info({
    title: 'Обновление доступно',
    message: 'Установить сейчас?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            console.log('Обновление запущено');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['<button>Позже</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

Особенности:

  • кнопки задаются массивом
  • каждая кнопка — массив из HTML и обработчика
  • обработчик получает instance и toast

Кастомизация внешнего вида

Информационные уведомления можно стилизовать:

iziToast.info({
    title: 'Система',
    message: 'Режим отладки включён',
    backgroundColor: '#2c3e50',
    titleColor: '#ecf0f1',
    messageColor: '#bdc3c7'
});

Доступные параметры:

  • backgroundColor
  • titleColor
  • messageColor
  • iconColor

Иконки и визуальные индикаторы

По умолчанию используется стандартная иконка info. Её можно заменить:

iziToast.info({
    title: 'Справка',
    message: 'Нажмите F1 для помощи',
    icon: 'fas fa-question-circle'
});

Поддерживаются любые классы иконок (например, Font Awesome).

Индикатор прогресса

Полоса прогресса отображает оставшееся время жизни уведомления:

iziToast.info({
    title: 'Загрузка',
    message: 'Идёт обработка данных',
    progressBar: true
});

Дополнительно можно изменить цвет:

progressBarColor: '#3498db'

Закреплённые уведомления

Информационные сообщения можно сделать постоянными:

iziToast.info({
    title: 'Внимание',
    message: 'Соединение нестабильно',
    timeout: 0,
    close: true
});
  • timeout: 0 — отключает авто-закрытие
  • close: true — добавляет кнопку закрытия

Обработчики событий

iziToast позволяет реагировать на жизненный цикл уведомления:

iziToast.info({
    title: 'Событие',
    message: 'Ожидание действия',
    onOpening: function () {
        console.log('Открывается');
    },
    onClosing: function () {
        console.log('Закрывается');
    }
});

Основные события:

  • onOpening
  • onOpened
  • onClosing
  • onClosed

Группировка уведомлений

Чтобы избежать дублирования, используется параметр id:

iziToast.info({
    id: 'network-status',
    title: 'Сеть',
    message: 'Подключено'
});

Повторный вызов с тем же id обновит уведомление.

Анимации появления и исчезновения

Анимации задаются через параметры:

iziToast.info({
    title: 'Анимация',
    message: 'Плавное появление',
    transitionIn: 'bounceInDown',
    transitionOut: 'fadeOutUp'
});

Поддерживаются CSS-анимации (например, из Animate.css).

Работа с несколькими уведомлениями

iziToast автоматически управляет стеком уведомлений. Для контроля количества:

iziToast.settings({
    maxWidth: 400,
    zindex: 9999
});

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

Информационные уведомления в асинхронных операциях

Частое применение — отображение статуса:

iziToast.info({
    title: 'Запрос',
    message: 'Отправка данных...'
});

fetch('/api/data')
    .then(() => {
        iziToast.info({
            title: 'Ответ',
            message: 'Данные успешно получены'
        });
    });

Использование HTML в сообщениях

Разрешено встраивание HTML:

iziToast.info({
    title: 'Подсказка',
    message: 'Перейти в <a href="/settings">настройки</a>'
});

Это позволяет создавать интерактивные и форматированные сообщения.

Глобальные настройки для info

Можно задать общие параметры:

iziToast.settings({
    timeout: 5000,
    position: 'topRight',
    transitionIn: 'fadeIn',
    transitionOut: 'fadeOut'
});

После этого все info уведомления будут использовать эти значения по умолчанию.

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

1. Информирование о состоянии системы

iziToast.info({
    title: 'Сервер',
    message: 'Соединение восстановлено'
});

2. Подсказки пользователю

iziToast.info({
    title: 'Подсказка',
    message: 'Двойной клик открывает файл'
});

3. Логирование действий

iziToast.info({
    title: 'Действие',
    message: 'Настройки обновлены'
});

4. Уведомления о фоновых процессах

iziToast.info({
    title: 'Фоновая задача',
    message: 'Синхронизация завершена'
});

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

  • не предназначены для критически важных сообщений
  • не должны перегружать интерфейс
  • желательно использовать короткие тексты
  • рекомендуется избегать навязчивых анимаций

Рекомендации по использованию

  • применять для нейтральной информации
  • не использовать вместо success или error
  • соблюдать единый стиль оформления
  • контролировать количество одновременно отображаемых уведомлений
  • учитывать мобильные устройства (позиционирование и размер)

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

Тип Назначение Цветовая схема
info нейтральная информация синий
success успешные операции зелёный
error ошибки красный
warning предупреждения жёлтый

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

Оглавление