Отступы между уведомлениями

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

Глобальные настройки отступов

Для управления расстоянием между всеми уведомлениями на странице используются глобальные параметры конфигурации при инициализации iziToast:

iziToast.settings({
    rtl: false,                  // направление текста
    balloon: false,              // оформление "пузырьком"
    layout: 2,                   // определяет макет уведомления
    toast: {
        spacing: 10              // основной параметр отступа между уведомлениями
    }
});

spacing – ключевой параметр, отвечающий за вертикальное расстояние между уведомлениями. Значение задается в пикселях. Например, spacing: 20 создаст увеличенный интервал, что особенно полезно при большом количестве уведомлений.

Важно: изменение spacing на глобальном уровне влияет на все уведомления, создаваемые после применения настроек.

Локальная настройка отступов для отдельных уведомлений

Для отдельного уведомления можно задать свойство padding или использовать опцию margin через CSS, чтобы изменить пространство вокруг конкретного toast:

iziToast.show({
    title: 'Сообщение',
    message: 'Это уведомление с увеличенным отступом',
    position: 'topRight',
    toastClass: 'custom-spacing'
});

.custom-spacing {
    margin-bottom: 30px; /* увеличенный отступ между уведомлениями */
}

Использование toastClass позволяет комбинировать стандартные стили iziToast с собственными CSS-правилами.
margin-bottom определяет вертикальный отступ от следующего уведомления.

Отступы в разных позициях

iziToast поддерживает различные позиции отображения уведомлений: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.

Для верхних уведомлений (topRight, topLeft, topCenter) отступ между уведомлениями задается через margin-bottom.
Для нижних уведомлений (bottomRight, bottomLeft, bottomCenter) – через margin-top.

Пример динамической установки отступов в зависимости от позиции:

iziToast.show({
    title: 'Верхнее уведомление',
    message: 'Отступы учитываются по позиции',
    position: 'topRight',
    toastClass: 'top-spacing'
});

iziToast.show({
    title: 'Нижнее уведомление',
    message: 'Используется margin-top',
    position: 'bottomRight',
    toastClass: 'bottom-spacing'
});

.top-spacing {
    margin-bottom: 25px;
}

.bottom-spacing {
    margin-top: 25px;
}

Автоматическое управление интервалами

Если уведомлений много и они создаются динамически, можно использовать автоматическое управление интервалами:

let toasts = [];
for (let i = 0; i < 5; i++) {
    toasts.push(iziToast.show({
        title: `Сообщение ${i+1}`,
        message: 'Автоматическое расположение',
        position: 'topRight'
    }));
}

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

Взаимодействие с `z-index` и overlay

Отступы между уведомлениями работают в связке с z-index, особенно если уведомления появляются поверх других элементов страницы:

iziToast.show({
    title: 'Важное уведомление',
    message: 'Отступ не накладывается на другие элементы',
    position: 'topRight',
    zindex: 9999
});

Высокий z-index гарантирует, что уведомления не перекрываются элементами интерфейса.
Отступы при этом сохраняют читаемость между отдельными toast-элементами.