Параметры modalOverlayOpeningRadius

В библиотеке Shepherd.js параметр modalOverlayOpeningRadius используется для управления радиусом «открытия» модального оверлея при создании пошаговых руководств (tours) с акцентом на определённые элементы страницы. Он позволяет задать, насколько велик будет вырез в затемнённом фоне вокруг элемента, к которому привязан шаг тура.

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

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

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

Синтаксис и использование

Параметр задаётся в пикселях и передаётся при конфигурации тур-шага или объекта Shepherd.Tour, если используется глобально для всех шагов с модальным оверлеем.

Пример конфигурации шага:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    modalOverlayOpeningRadius: 15, // радиус прозрачного круга в пикселях
    scrollTo: true,
    cancelIcon: {
      enabled: true
    },
    classes: 'shadow-md bg-purple-dark'
  }
});

tour.addStep({
  id: 'example-step',
  text: 'Это пример шага с кастомным радиусом модального оверлея.',
  attachTo: {
    element: '#target-element',
    on: 'bottom'
  }
});

В этом примере прозрачный круг вокруг #target-element будет иметь радиус 15px. При изменении значения радиуса визуально меняется размер «выемки» в затемнённом фоне.

Влияние на восприятие пользователя

  • Малый радиус (например, 5–10px) создаёт узкий акцент на элементе. Это полезно для маленьких кнопок или иконок, где важно подчеркнуть точное место клика.
  • Средний радиус (15–30px) обеспечивает комфортное визуальное выделение и подходит для стандартных форм, полей ввода или карточек интерфейса.
  • Большой радиус (30px и выше) создаёт обширную прозрачную область, что может быть полезно для крупных панелей или целых секций страницы.

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

Динамическое изменение радиуса

Параметр modalOverlayOpeningRadius может быть изменён динамически в процессе работы тура, если шаги добавляются или модифицируются на лету:

tour.getCurrentStep().updateStepOptions({
  modalOverlayOpeningRadius: 25
});

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

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

  1. useModalOverlay – включает или выключает модальный оверлей. Если параметр выключен, modalOverlayOpeningRadius не имеет эффекта.
  2. highlightClass – CSS-класс, который применяется к выделенному элементу. Радиус оверлея визуально сочетается с этим классом.
  3. modalOverlayOpeningPadding – дополнительное внутреннее отступление вокруг прозрачного круга. Используется совместно с радиусом для точной подгонки визуального фокуса.

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

  • Для маленьких интерактивных элементов рекомендуется радиус в диапазоне 10–20px.
  • Для больших секций интерфейса или карточек – 20–40px, чтобы обеспечить достаточный контраст с затемнённым фоном.
  • При адаптации под мобильные устройства нужно учитывать, что слишком маленький радиус может визуально «съезжать» из-за масштаба экрана.
  • Использование анимации открытия оверлея совместно с радиусом повышает визуальное качество и делает переходы более плавными.

Итоговое влияние на UX

Параметр modalOverlayOpeningRadius играет ключевую роль в формировании визуального фокуса и интуитивного восприятия шагов в Shepherd.js. Грамотно подобранный радиус улучшает понимание интерфейса пользователем, снижает когнитивную нагрузку и делает туры более профессиональными и аккуратными.

Оглавление