Отступы и смещения

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

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

  • offset – ключевой параметр для управления смещением уведомления от границ окна. Он может быть задан в пикселях или в виде массива:
iziToast.show({
    title: 'Пример',
    message: 'Смещение уведомления',
    position: 'topRight',
    offset: 50 // смещение от верхнего и правого края на 50px
});
  • Если требуется раздельное смещение по горизонтали и вертикали, можно использовать объект:
iziToast.show({
    title: 'Индивидуальные отступы',
    message: 'Разные значения по осям',
    position: 'bottomLeft',
    offset: { x: 30, y: 60 } // x — горизонтально, y — вертикально
});
  • Важный момент: offset учитывается относительно выбранного положения position. Например, для topRight y смещает вниз, а x — влево от правого края.

Внутренние отступы (padding)

Управление внутренними отступами уведомления позволяет изменять пространство между контентом и границами блока:

iziToast.show({
    title: 'Padding example',
    message: 'Увеличенные внутренние отступы',
    padding: 20 // отступ со всех сторон 20px
});

Можно также указать массив для раздельного контроля:

iziToast.show({
    title: 'Раздельные отступы',
    message: 'Верх/право/низ/лево',
    padding: [10, 20, 10, 20] // top, right, bottom, left
});

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

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

iziToast.settings({
    timeout: 5000,
    zindex: 9999,
    layout: 2,
    balloon: true
});

  • layout влияет на способ расчёта смещения между уведомлениями:

    • 1 — стандартное вертикальное размещение.
    • 2 — с учётом внутренних отступов (balloon style), уведомления располагаются с отступами, создавая визуальный «пузырь».

Смещение контента внутри уведомления

  • titleLineHeight и messageLineHeight регулируют вертикальное расстояние текста внутри уведомления:
iziToast.show({
    title: 'Line height example',
    message: 'Увеличенное расстояние между строками',
    titleLineHeight: 28,
    messageLineHeight: 24
});
  • Использование этих параметров важно при отображении длинного текста или многострочных сообщений.

Пример комплексной настройки смещений

iziToast.show({
    title: 'Комплексный пример',
    message: 'Положение, внутренние отступы и линии',
    position: 'bottomRight',
    offset: { x: 40, y: 80 },
    padding: [15, 25, 15, 25],
    titleLineHeight: 26,
    messageLineHeight: 22,
    balloon: true
});

В этом примере уведомление:

  • Располагается внизу справа с отступом 80px от низа и 40px от правого края.
  • Имеет внутренние поля 15–25px для лучшего визуального баланса.
  • Текст заголовка и сообщения выровнен по линии с индивидуальным интервалом.
  • Используется «balloon layout» для эстетичного визуального отделения уведомления от фона.

Итоговые рекомендации по отступам и смещениям

  • Всегда учитывать выбранное положение (position) при расчёте offset.
  • Для многострочных уведомлений настраивать titleLineHeight и messageLineHeight.
  • Использовать массивы в padding для раздельного контроля каждой стороны.
  • При большом количестве уведомлений проверять визуальное расстояние между ними, чтобы они не сливались друг с другом.

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

Оглавление