Параметры modalOverlayOpeningPadding

modalOverlayOpeningPadding — это опция, которая управляет отступом между модальным оверлеем и элементами интерфейса при открытии шага в Shepherd.js. Она особенно актуальна при использовании модальных туров, когда основное содержимое страницы затемняется, а внимание пользователя фокусируется на конкретных элементах.

Назначение и область применения

Основная задача modalOverlayOpeningPadding — обеспечить визуальный промежуток между границами оверлея и целевым элементом. Без этого отступа модальный слой может накладываться слишком близко к элементу, что ухудшает визуальное восприятие и снижает удобство взаимодействия.

Применяется в случаях, когда:

  • Необходимо подчеркнуть элемент интерфейса, не перекрывая его полностью оверлеем.
  • Требуется согласованность дизайна модального тура с остальным UI.
  • Ширина и высота элементов динамически изменяются, и стандартный оверлей выглядит слишком плотным.

Синтаксис

const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    modalOverlayOpeningPadding: 10
  }
});

Пояснения:

  • useModalOverlay: true — активирует модальный оверлей.
  • modalOverlayOpeningPadding: 10 — задаёт отступ в 10 пикселей между оверлеем и целевым элементом.
  • Значение может быть числовым (пиксели) или объектом для разных сторон (подробнее ниже).

Использование объекта для гибкой настройки

modalOverlayOpeningPadding можно задать как объект, чтобы указать отступы отдельно для каждой стороны элемента:

modalOverlayOpeningPadding: {
  top: 15,
  right: 20,
  bottom: 15,
  left: 20
}
  • top — отступ сверху.
  • right — отступ справа.
  • bottom — отступ снизу.
  • left — отступ слева.

Такой подход позволяет создавать более точные и эстетичные модальные выделения, особенно на сложных макетах с различными размерами элементов.

Влияние на поведение шага

  • Анимация открытия оверлея: padding учитывается при расчёте стартовой позиции и размеров анимации.
  • Фокусировка на элементе: Shepherd автоматически позиционирует подсказку относительно целевого элемента с учётом отступа.
  • Совместимость с responsive-дизайном: при изменении размеров окна отступы корректно сохраняются, предотвращая наложение оверлея на контент.

Рекомендации по выбору значения

  1. Минимальный комфортный отступ — обычно 5–10 пикселей, чтобы не мешать восприятию элемента.
  2. Большие элементы UI — увеличивать padding до 20–30 пикселей, чтобы визуально отделять оверлей от границ элемента.
  3. Мобильные устройства — лучше использовать объектный формат, чтобы адаптировать отступы под разные стороны, учитывая вертикальные и горизонтальные ориентации.

Примеры практического применения

Простой отступ

tour.addStep({
  text: 'Выберите пункт меню для продолжения.',
  attachTo: { element: '#menu-item', on: 'bottom' },
  modalOverlayOpeningPadding: 10
});
  • Оверлей будет отступать на 10 пикселей от #menu-item.

Адаптивный отступ

tour.addStep({
  text: 'Форма регистрации находится здесь.',
  attachTo: { element: '#registration-form', on: 'top' },
  modalOverlayOpeningPadding: { top: 20, right: 15, bottom: 20, left: 15 }
});
  • Отступы адаптированы под каждую сторону формы.
  • Улучшает визуальное восприятие при различных разрешениях экрана.

Взаимодействие с другими опциями Shepherd.js

  • useModalOverlay — обязательна для того, чтобы modalOverlayOpeningPadding вступил в силу.
  • scrollTo — при автоматической прокрутке страницы padding помогает избежать наложения подсказки на края видимой области.
  • attachTo — отступ применяется относительно целевого элемента, выбранного для шага.

Подводные нюансы

  • Отрицательные значения не поддерживаются и могут вызвать непредсказуемое поведение.
  • Слишком большой padding может привести к тому, что целевой элемент частично окажется вне видимой области при открытии шага.
  • Если modalOverlayOpeningPadding не задан, Shepherd использует значение по умолчанию (обычно 0–5 пикселей, в зависимости от версии).

Заключение по функциональности

modalOverlayOpeningPadding — ключевой инструмент для точного управления внешним видом модального оверлея в Shepherd.js. Правильная настройка этой опции обеспечивает чёткое выделение элементов интерфейса, улучшает визуальную и интерактивную составляющую тура, и повышает общий уровень удобства использования веб-приложения.

Оглавление