Параметр offset

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

Синтаксис и структура

offset задается объектом с двумя свойствами:

offset: {
    x: <число>,
    y: <число>
}
  • x — горизонтальное смещение в пикселях. Положительные значения смещают уведомление вправо, отрицательные — влево.
  • y — вертикальное смещение в пикселях. Положительные значения смещают уведомление вниз, отрицательные — вверх.

Пример базовой конфигурации:

Toastify({
    text: "Пример уведомления",
    duration: 3000,
    offset: {
        x: 50,
        y: 100
    }
}).showToast();

В этом примере тост будет смещен на 50 пикселей вправо и на 100 пикселей вниз от исходной позиции, определяемой параметром gravity и position.

Взаимодействие с gravity и position

offset работает в комбинации с параметрами gravity и position:

  • gravity: "top" или "bottom" определяет вертикальную привязку.
  • position: "left", "center", "right" определяет горизонтальную привязку.

Параметр offset добавляет дополнительное смещение относительно этих базовых точек.

Примеры:

Toastify({
    text: "Смещение сверху и справа",
    gravity: "top",
    position: "right",
    offset: {
        x: -20, // сдвиг влево от правого края
        y: 30   // сдвиг вниз от верхнего края
    }
}).showToast();

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

Использование отрицательных значений

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

Toastify({
    text: "Выход за границу окна",
    offset: {
        x: -50,
        y: -20
    }
}).showToast();

Тост сместится на 50 пикселей влево и на 20 пикселей вверх относительно исходной позиции.

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

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

const headerHeight = document.querySelector("header").offsetHeight;

Toastify({
    text: "Уведомление с учётом высоты шапки",
    offset: {
        x: 0,
        y: headerHeight + 10
    }
}).showToast();

В данном примере тост будет отображаться сразу под шапкой сайта, независимо от её динамической высоты.

Случаи использования

  • Избегание перекрытия элементов: при фиксированных шапках или панелях смещение y помогает тостам не накладываться на них.
  • Подстройка под дизайн: x и y позволяют идеально вписать уведомление в визуальную сетку интерфейса.
  • Динамическая адаптация: вычисление смещения на основе других элементов делает интерфейс более отзывчивым.

Практические советы

  1. Всегда учитывать единицы измерения: offset принимает значения только в пикселях.
  2. Для нескольких уведомлений можно использовать разные смещения, чтобы избежать наложения тостов.
  3. Комбинация с gravity и position дает полный контроль над расположением уведомлений.
  4. При адаптивном дизайне стоит вычислять смещения динамически, учитывая размеры элементов на разных разрешениях.

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

Оглавление