modalOverlayOpeningPadding

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

Основное назначение

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    modalOverlayOpeningPadding: 10
  }
});

В этом примере modalOverlayOpeningPadding: 10 задаёт отступ в 10 пикселей между элементом, на который указывает шаг тура, и модальным оверлеем.

Влияние на взаимодействие пользователя

  • Повышение визуальной читаемости Элемент не сливается с оверлеем, пользователь сразу видит активный объект.
  • Снижение ошибок кликов Если оверлей перекрывает элемент без отступа, возможны случайные нажатия.
  • Адаптация к разным размерам экранов Отступ помогает сохранить корректную подсветку на устройствах с малым разрешением.

Настройка для различных шагов тура

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

tour.addStep({
  id: 'step1',
  text: 'Нажмите здесь, чтобы продолжить.',
  attachTo: { element: '#button', on: 'bottom' },
  modalOverlayOpeningPadding: 20
});
  • Глобальный параметр — применяется ко всем шагам, где используется модальный оверлей.
  • Локальный параметр — переопределяет глобальный для конкретного шага, позволяя адаптировать отступ под размеры элемента.

Взаимодействие с другими настройками модального оверлея

modalOverlayOpeningPadding работает в связке с:

  • modal – включает или отключает модальный режим тура.
  • modalOverlayOpeningRadius – задаёт радиус скругления углов оверлея вокруг элемента.
  • highlightClass – CSS-класс для подсветки элемента.

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    modal: true,
    modalOverlayOpeningPadding: 15,
    modalOverlayOpeningRadius: 8,
    highlightClass: 'custom-highlight'
  }
});

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

Рекомендации по значению

  • Малые элементы (кнопки, иконки) – от 5 до 10 пикселей.
  • Средние элементы (панели, формы) – от 10 до 20 пикселей.
  • Крупные элементы (модальные окна, карточки) – 20 и выше.

Слишком маленькое значение приводит к визуальному слипанию с оверлеем, слишком большое — к нарушению восприятия контекста страницы.

Особенности реализации в Shepherd.js

  1. Параметр учитывается только в модальном туре (modal: true).
  2. Отступ применяется динамически при открытии шага, что позволяет адаптироваться к изменениям DOM.
  3. В CSS оверлея может быть задано затухание фона и скругление углов, что усиливает эффект визуальной изоляции элемента.

Пример полной конфигурации тура с акцентом на modalOverlayOpeningPadding

const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    modal: true,
    modalOverlayOpeningPadding: 12
  }
});

tour.addStep({
  id: 'intro',
  text: 'Это первый шаг тура.',
  attachTo: { element: '#intro-element', on: 'bottom' }
});

tour.addStep({
  id: 'next-step',
  text: 'Обратите внимание на этот элемент.',
  attachTo: { element: '#feature-element', on: 'right' },
  modalOverlayOpeningPadding: 18
});

tour.start();

В этом примере первый шаг использует глобальный отступ 12px, а второй шаг задаёт индивидуальный отступ 18px для лучшего визуального эффекта на более крупном элементе.

Выводы по использованию

  • modalOverlayOpeningPadding обеспечивает чёткое выделение активных элементов в модальных турах.
  • Значение параметра должно подбираться в зависимости от размера и важности элемента.
  • Использование в сочетании с modalOverlayOpeningRadius и highlightClass позволяет создать профессионально выглядящий пользовательский тур, минимизируя визуальный шум и повышая удобство навигации.
Оглавление