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

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

Стекинг позволяет создавать интерфейсы, где уведомления не накладываются друг на друга, а аккуратно располагаются в выбранной области страницы. Для этого используются параметры position, timeout, layout, maxWidth и другие.

Параметр position

Параметр position определяет, где на экране будут отображаться уведомления. Стандартные значения:

  • topRight — верхний правый угол
  • topLeft — верхний левый угол
  • bottomRight — нижний правый угол
  • bottomLeft — нижний левый угол
  • topCenter — центр вверху
  • bottomCenter — центр внизу

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

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление в верхнем правом углу',
    position: 'topRight'
});

Контроль порядка уведомлений

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

  • stack: true — новые уведомления появляются в начале стека (по умолчанию)
  • stack: false — новые уведомления добавляются в конец стека
iziToast.show({
    title: 'Новое уведомление',
    message: 'Будет добавлено в конец стека',
    position: 'topRight',
    stack: false
});

Ограничение числа одновременно отображаемых уведомлений

Чтобы интерфейс оставался аккуратным, можно ограничить количество уведомлений, одновременно видимых на экране. Для этого используется maxOpened:

iziToast.settings({
    maxOpened: 3,
    resetOnHover: true
});
  • maxOpened — максимальное количество уведомлений в стеке
  • resetOnHover: true — при наведении таймер закрытия уведомления сбрасывается

Если превышено количество уведомлений, старые уведомления закрываются автоматически.

Настройка интервала между уведомлениями

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

iziToast.show({
    title: 'Уведомление',
    message: 'Таймер 5000 мс',
    position: 'topRight',
    timeout: 5000,
    zindex: 9999
});
  • timeout задаёт время до автоматического закрытия
  • zindex гарантирует, что уведомления будут поверх других элементов

Разделение стека на группы

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

iziToast.show({
    title: 'Информация',
    message: 'Правый верхний угол',
    position: 'topRight'
});

iziToast.show({
    title: 'Ошибка',
    message: 'Левый нижний угол',
    position: 'bottomLeft'
});

Каждый стек управляется независимо: количество уведомлений, порядок и таймеры не пересекаются.

Динамическое обновление уведомлений в стеке

В некоторых случаях требуется обновлять существующее уведомление, а не создавать новое. Для этого используется параметр id. Уведомления с одинаковым id заменяют друг друга в стеке:

iziToast.show({
    id: 'progressToast',
    title: 'Загрузка',
    message: '0%',
    position: 'topRight',
    timeout: false
});

// обновление прогресса
iziToast.update({
    id: 'progressToast',
    message: '50%'
});

Использование id предотвращает засорение стека множеством уведомлений одного типа.

Анимации при стекинге

iziToast поддерживает плавное появление и исчезновение уведомлений через transitionIn и transitionOut. При стекинге это позволяет уведомлениям естественно сдвигаться, не создавая резких скачков:

iziToast.show({
    title: 'Анимация',
    message: 'slideInRight / slideOutRight',
    position: 'topRight',
    transitionIn: 'slideInRight',
    transitionOut: 'slideOutRight'
});
  • transitionIn — анимация появления
  • transitionOut — анимация закрытия

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

Чтобы уведомления не перекрывали важный контент, можно ограничить их ширину:

iziToast.show({
    title: 'Уведомление',
    message: 'Максимальная ширина 300px',
    position: 'topRight',
    maxWidth: 300
});
  • maxWidth контролирует ширину уведомления, не влияя на высоту
  • При стекинге все уведомления автоматически выравниваются по ширине

Эти инструменты позволяют создавать чётко организованные и визуально аккуратные стеки уведомлений, управляя их количеством, порядком и поведением на странице. Стекинг в iziToast — это гибкая система, которая легко масштабируется под любые интерфейсы и сценарии использования.

Оглавление