Адаптивное позиционирование

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

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

Позиция уведомления задается с помощью свойства position. Доступные значения:

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

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

iziToast.show({
    title: 'Успешно',
    message: 'Данные сохранены',
    position: 'topRight'
});

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

Адаптация к размерам экрана

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

function getToastPosition() {
    return window.innerWidth < 768 ? 'bottomCenter' : 'topRight';
}

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

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

Использование отступов

Отступы задаются свойствами margin и padding для контроля расстояния уведомления от краев экрана или других элементов:

iziToast.show({
    title: 'Внимание',
    message: 'Проверьте форму',
    position: 'topRight',
    margin: {
        x: 20, // горизонтальный отступ
        y: 50  // вертикальный отступ
    }
});

x — горизонтальный отступ
y — вертикальный отступ

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

Позиционирование нескольких уведомлений

По умолчанию несколько уведомлений в одной позиции выводятся друг под другом. Для контроля порядка используется свойство stack:

iziToast.show({
    title: 'Первое уведомление',
    message: 'Верхнее уведомление',
    position: 'topRight',
    stack: true
});

iziToast.show({
    title: 'Второе уведомление',
    message: 'Следующее уведомление',
    position: 'topRight',
    stack: true
});

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

Центрирование уведомлений

Центральная позиция используется для критических сообщений, требующих максимального внимания. Для корректного центрирования можно применять дополнительные CSS-параметры:

iziToast.show({
    title: 'Ошибка',
    message: 'Произошла критическая ошибка',
    position: 'center',
    timeout: false, // уведомление останется на экране до закрытия
    drag: false     // запрет на перемещение уведомления
});

timeout: false и drag: false часто применяются вместе с центрированными уведомлениями, чтобы гарантировать, что пользователь увидит сообщение.

Динамическая смена позиции

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

const toast = iziToast.show({
    title: 'Событие',
    message: 'Уведомление с динамической позицией',
    position: 'topRight'
});

// При открытии модального окна перемещаем уведомление
document.querySelector('#modal').addEventListener('show', () => {
    toast.setPosition('bottomLeft');
});

Метод setPosition() позволяет корректно адаптировать уведомление к новым условиям без необходимости повторного создания экземпляра.