highlightClass

В библиотеке Shepherd.js свойство highlightClass используется для управления визуальным выделением элементов интерфейса, на которые фокусируется текущий шаг тура. Оно позволяет добавлять пользовательские CSS-классы к целевому элементу, создавая эффект подсветки, изменения фона, рамки или тени. Это особенно полезно для улучшения восприятия пользователем, указывая на ключевые элементы интерфейса.

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

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

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

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

tour.addStep({
  id: 'example-step',
  text: 'Обратите внимание на этот элемент',
  attachTo: { element: '#my-element', on: 'bottom' },
  highlightClass: 'highlighted-element'
});

tour.start();

В этом примере к элементу с id="my-element" на время шага будет применён CSS-класс highlighted-element. После перехода к следующему шагу класс исчезнет.

Настройка визуального эффекта

CSS-класс, указанный в highlightClass, полностью контролируется разработчиком. Можно использовать любые свойства, чтобы выделить элемент:

.highlighted-element {
  border: 3px solid #FF5722;
  box-shadow: 0 0 10px rgba(255, 87, 34, 0.6);
  border-radius: 4px;
}

Примеры популярных эффектов:

  • Подсветка рамкой — изменение border и box-shadow.
  • Изменение фона — применение background-color с прозрачностью.
  • Анимация подсветки — через transition или animation для плавного появления.

Совместимость с другими свойствами Shepherd.js

highlightClass хорошо сочетается с:

  • attachTo — фокус шага привязан к конкретному элементу.
  • scrollTo — позволяет прокручивать страницу к элементу.
  • advanceOn — автоматический переход к следующему шагу после действия пользователя.

Важно: если highlightClass не указан, Shepherd.js не применяет никакой визуальной подсветки, но шаг по-прежнему корректно прикрепляется к элементу.

Динамическое управление подсветкой

В некоторых случаях требуется менять класс подсветки во время выполнения тура. Shepherd.js позволяет модифицировать шаги после их создания через методы updateStepOptions:

tour.getById('example-step').updateStepOptions({
  highlightClass: 'new-highlighted-element'
});

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

Рекомендации по использованию

  1. Лаконичность — избегать перегруженных визуальных эффектов, чтобы не отвлекать пользователя.
  2. Контрастность — класс должен хорошо выделять элемент на фоне интерфейса.
  3. Совместимость с мобильными устройствами — проверять, чтобы подсветка корректно отображалась при адаптивной верстке.
  4. Производительность — минимизировать сложные анимации для большого количества шагов.

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

Комбинация с анимацией:

.animated-highlight {
  border: 2px solid #4CAF50;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); }
  50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.7); }
  100% { box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); }
}

Использование в шаге:

tour.addStep({
  id: 'animated-step',
  text: 'Смотрите на анимированный элемент',
  attachTo: { element: '#animated-element', on: 'top' },
  highlightClass: 'animated-highlight'
});

Смена подсветки для разных состояний интерфейса:

const step = tour.getById('example-step');
if (document.querySelector('#my-element').classList.contains('active')) {
  step.updateStepOptions({ highlightClass: 'highlight-active' });
} else {
  step.updateStepOptions({ highlightClass: 'highlight-inactive' });
}

Такой подход позволяет адаптировать визуальные подсказки под состояние приложения, повышая интерактивность тура.

Свойство highlightClass — мощный инструмент для визуального акцента на элементах интерфейса в Shepherd.js, обеспечивающий гибкость, простоту настройки и интеграцию с любыми CSS-эффектами.

Оглавление