Скрытие уведомлений

Библиотека iziToast предоставляет гибкий механизм для отображения уведомлений в веб-приложениях, включая управление их временем жизни и способами скрытия. Управление скрытием уведомлений является важным аспектом UX, так как правильное поведение тостов позволяет пользователю не отвлекаться и поддерживает визуальную чистоту интерфейса.

Автоматическое скрытие

Каждое уведомление в iziToast может автоматически исчезать через определённое время, задаваемое параметром timeout. Значение timeout указывается в миллисекундах.

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

iziToast.show({
    title: 'Успех',
    message: 'Данные сохранены',
    timeout: 3000 // уведомление исчезнет через 3 секунды
});

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

  • Значение timeout: false отключает автоматическое скрытие.
  • Если timeout не указан, используется значение по умолчанию (5000 мс).
  • Автоматическое скрытие сопровождается анимацией плавного исчезновения, управляемой параметрами transitionIn и transitionOut.

Ручное закрытие уведомлений

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

  1. iziToast.hide() – скрывает конкретное уведомление. Пример:
let toast = iziToast.show({
    title: 'Информация',
    message: 'Процесс начался',
    timeout: false,
    id: 'custom-toast'
});

// Позднее скрытие уведомления по ID
iziToast.hide({}, document.getElementById('custom-toast'));

Параметры метода hide:

  • id – идентификатор уведомления.
  • transitionOut – тип анимации при скрытии (fadeOut, slideOutUp, bounceOutRight и др.).
  • onClosed – функция обратного вызова после скрытия.
  1. iziToast.destroy() – удаляет все уведомления сразу, очищая очередь. Полезно при смене состояния приложения или при необходимости мгновенной очистки интерфейса.
iziToast.destroy();

Взаимодействие с пользователем

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

  • Клик по уведомлению: можно настроить автоматическое закрытие через onclick.
iziToast.show({
    title: 'Предупреждение',
    message: 'Нажмите, чтобы закрыть',
    timeout: false,
    onClick: function(instance, toast) {
        instance.hide({ transitionOut: 'fadeOut' }, toast);
    }
});
  • Кнопки внутри тоста: уведомления могут содержать элементы управления для ручного скрытия.
iziToast.show({
    title: 'Внимание',
    message: 'Подтвердите действие',
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

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

Уведомления могут приостанавливать автоматическое скрытие, если пользователь навёл на них курсор. Используется параметр pauseOnHover.

iziToast.show({
    title: 'Событие',
    message: 'Наведи мышь для задержки',
    timeout: 4000,
    pauseOnHover: true
});

Механизм работы:

  • Уведомление будет оставаться видимым, пока пользователь удерживает курсор.
  • По уходу курсора таймер возобновляет отсчёт timeout.

Приоритет и управление очередью

iziToast поддерживает очередь уведомлений. Скрытие одного уведомления может автоматически показать следующий в очереди. Параметры управления:

  • maxOpened – максимальное количество одновременно видимых уведомлений.
  • resetOnHover – сброс таймера при наведении.
  • stack – вертикальное расположение тостов при множестве уведомлений.
iziToast.show({
    title: 'Очередь уведомлений',
    message: 'Пример управления stack',
    timeout: 2000,
    position: 'topRight'
});

Анимации при скрытии

Типы анимаций управляются параметром transitionOut. Доступны следующие варианты:

  • fadeOut – плавное исчезновение.
  • fadeOutUp, fadeOutDown – исчезновение с движением вверх или вниз.
  • slideOutLeft, slideOutRight – сдвиг влево или вправо.
  • bounceOutLeft, bounceOutRight – анимированное «отскакивание».
iziToast.show({
    title: 'Анимация',
    message: 'Проверка анимации скрытия',
    timeout: 3000,
    transitionOut: 'slideOutRight'
});

Обратные вызовы при скрытии

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

  • onClosing – вызывается при начале скрытия уведомления.
  • onClosed – вызывается после полного исчезновения уведомления.
iziToast.show({
    title: 'Событие закрытия',
    message: 'Обработка после скрытия',
    timeout: 2000,
    onClosing: function(instance, toast, closedBy){
        console.log('Начало закрытия уведомления', closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление закрыто', closedBy);
    }
});

Параметр closedBy указывает причину скрытия: 'timeout', 'click', 'button', 'overlay' или 'manual'.

Резюме по скрытию уведомлений

  • Автоматическое скрытие управляется timeout и pauseOnHover.
  • Ручное скрытие через hide() или destroy().
  • Пользовательские действия могут инициировать закрытие (onclick, кнопки).
  • Анимации скрытия задаются через transitionOut.
  • Колбэки onClosing и onClosed позволяют интегрировать уведомления в логику приложения.
  • Очередь и максимальное количество видимых тостов контролируют порядок отображения и скрытия.

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

Оглавление