Пользовательские координаты

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

Задание координат через свойства position и target

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

iziToast.show({
    title: 'Пример',
    message: 'Уведомление с пользовательскими координатами',
    position: 'custom',
    target: 'body', // Элемент, относительно которого будет позиционироваться уведомление
    layout: 2 // Размер и форма уведомления (опционально)
});
  • position: 'custom' — активирует возможность точного позиционирования.
  • target — указывает контейнер, относительно которого будут рассчитываться координаты. Если не задано, берется body.

Использование CSS для точного позиционирования

После активации custom позиции, iziToast позволяет изменять стиль уведомления через объект onOpening или напрямую через document.querySelector:

iziToast.show({
    title: 'Пользовательская позиция',
    message: 'Устанавливаем координаты через CSS',
    position: 'custom',
    onOpening: function(instance, toast){
        toast.style.top = '150px';
        toast.style.left = '300px';
    }
});
  • Свойства top и left задают отступ от верхнего левого угла контейнера.
  • Можно использовать значения в пикселях (px) или процентах (%).

Применение динамических координат

Координаты можно рассчитывать динамически, например, относительно размеров окна:

iziToast.show({
    title: 'Центр экрана',
    message: 'Уведомление посередине окна',
    position: 'custom',
    onOpening: function(instance, toast){
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        toast.style.left = (windowWidth / 2 - toast.offsetWidth / 2) + 'px';
        toast.style.top = (windowHeight / 2 - toast.offsetHeight / 2) + 'px';
    }
});

Такой подход позволяет создавать уведомления, которые всегда остаются по центру, независимо от размеров экрана.

Интеграция с элементами страницы

Уведомление можно позиционировать относительно конкретного DOM-элемента, используя его размеры и координаты:

const button = document.querySelector('#myButton');
iziToast.show({
    title: 'Относительно кнопки',
    message: 'Всплывающее уведомление рядом с кнопкой',
    position: 'custom',
    onOpening: function(instance, toast){
        const rect = button.getBoundingClientRect();
        toast.style.left = rect.left + 'px';
        toast.style.top = (rect.bottom + 10) + 'px';
    }
});
  • getBoundingClientRect() возвращает координаты элемента относительно окна браузера.
  • Добавление небольшого смещения (+ 10) позволяет не перекрывать элемент.

Адаптация под мобильные устройства

Для корректного отображения на мобильных устройствах важно учитывать размеры экрана и ориентацию:

iziToast.show({
    title: 'Мобильная позиция',
    message: 'С адаптацией под экран',
    position: 'custom',
    onOpening: function(instance, toast){
        const padding = 20;
        const width = window.innerWidth;
        const height = window.innerHeight;

        toast.style.left = (width - toast.offsetWidth - padding) + 'px';
        toast.style.top = (height - toast.offsetHeight - padding) + 'px';
    }
});
  • Обеспечивает отступ от краев экрана.
  • Позволяет избежать обрезания уведомления при малых размерах экрана.

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

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

const positions = [
    {top: 50, left: 50},
    {top: 50, left: 300},
    {top: 150, left: 50}
];

positions.forEach(pos => {
    iziToast.show({
        title: 'Множественные',
        message: `Координаты: ${pos.left}px, ${pos.top}px`,
        position: 'custom',
        onOpening: function(instance, toast){
            toast.style.left = pos.left + 'px';
            toast.style.top = pos.top + 'px';
        }
    });
});
  • Использование массива координат позволяет создавать сетку уведомлений.
  • Отступы можно регулировать динамически, чтобы избежать перекрытия.

Важные нюансы

  • Свойство position: 'custom' отключает стандартное смещение iziToast и позволяет полностью управлять координатами.
  • Изменение стилей через onOpening гарантирует корректное позиционирование перед отображением.
  • Для отзывчивого дизайна рекомендуется использовать динамические расчеты через window.innerWidth, window.innerHeight и размеры уведомления.
  • Можно комбинировать с анимацией animateInside: true для плавного появления в кастомной позиции.
Оглавление