Персонализация туров

Shepherd.js предоставляет гибкий механизм для персонализации визуального и функционального представления туров. Каждый тур состоит из шагов (steps), каждый из которых может быть индивидуально настроен с помощью следующих свойств:

  • title и text — заголовок и описание шага. Допускается использование HTML-кода для расширенного форматирования текста.
  • classes — добавление CSS-классов к шагу для изменения внешнего вида. Можно подключать собственные стили для уникального оформления.
  • scrollTo — управление прокруткой страницы до целевого элемента. Значение true прокручивает элемент в центр окна, а объект с параметрами позволяет задать смещение и плавность анимации.
  • attachTo — указание элемента DOM и позиции относительно него, к которому будет привязан всплывающий шаг. Формат: { element: '.selector', on: 'bottom' }.
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'custom-step',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  id: 'intro',
  title: 'Добро пожаловать',
  text: 'Это пример настройки внешнего вида шага.',
  attachTo: { element: '#start', on: 'right' }
});

Настройка кнопок и действий

Каждый шаг может содержать кнопки с индивидуальными действиями, позволяя реализовать сложные сценарии поведения. Основные свойства кнопок:

  • text — текст кнопки.
  • action — функция, которая выполняется при нажатии.
  • classes — CSS-классы кнопки для стилизации.

Shepherd.js позволяет назначать кнопкам действия, встроенные в API, например tour.next(), tour.back(), tour.cancel(), или собственные функции.

tour.addStep({
  id: 'step-buttons',
  title: 'Навигация',
  text: 'Вы можете управлять туром через кнопки.',
  buttons: [
    { text: 'Назад', action: tour.back, classes: 'shepherd-button-secondary' },
    { text: 'Далее', action: tour.next, classes: 'shepherd-button-primary' },
    { text: 'Пропустить', action: tour.cancel, classes: 'shepherd-button-danger' }
  ]
});

Настройка поведения туров

Shepherd.js поддерживает управление поведением туров через глобальные и локальные настройки:

  • useModalOverlay — включение затемнения фонового контента для акцентирования внимания на шаге.
  • modal — позволяет включать модальный режим для блокировки взаимодействия с другими элементами страницы.
  • exitOnEsc и keyboardNavigation — управление закрытием тура клавишей Esc и навигацией через стрелки.
  • canClickTarget — определяет, разрешено ли пользователю кликать на целевой элемент во время шага.
const tour = new Shepherd.Tour({
  useModalOverlay: true,
  exitOnEsc: true,
  keyboardNavigation: true,
  defaultStepOptions: {
    canClickTarget: false
  }
});

Пользовательские события и колбэки

Для максимальной персонализации можно использовать события, вызываемые на разных стадиях тура:

  • show — вызывается при отображении шага.
  • hide — вызывается при скрытии шага.
  • complete — вызывается при завершении тура.
  • cancel — вызывается при отмене тура пользователем.
tour.on('start', () => console.log('Тур начат'));
tour.on('complete', () => console.log('Тур завершен'));
tour.addStep({
  id: 'step-events',
  title: 'События',
  text: 'Этот шаг демонстрирует колбэки.',
  when: {
    show: () => console.log('Шаг отображен'),
    hide: () => console.log('Шаг скрыт')
  }
});

Использование шаблонов и HTML-контента

Для более сложного оформления шагов допускается вставка HTML-контента:

  • В text можно использовать HTML-элементы, включая ссылки, списки и изображения.
  • CSS-классы позволяют интегрировать сторонние стили и анимации.
  • Можно создавать динамический контент, обновляемый во время выполнения тура.
tour.addStep({
  id: 'custom-html',
  title: 'Шаг с HTML',
  text: `
    <h3>Заголовок внутри HTML</h3>
    <p>Описание с <strong>жирным текстом</strong> и ссылкой: <a href="#">Подробнее</a></p>
  `,
  classes: 'custom-html-step'
});

Адаптивность и позиционирование

Shepherd.js позволяет контролировать положение шагов относительно целевых элементов и экрана:

  • attachTo с параметром on — top, bottom, left, right, auto.
  • Автоматический пересчет позиции при изменении размеров окна.
  • Опции popperOptions позволяют тонко настраивать поведение библиотек позиционирования, используемых внутри Shepherd.js (Popper.js).
tour.addStep({
  id: 'responsive-step',
  title: 'Адаптивный шаг',
  text: 'Шаг автоматически подстраивается под окно.',
  attachTo: { element: '#responsive', on: 'auto' },
  popperOptions: { modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] }
});

Персонализация тем и стилей

Для создания уникального визуального стиля тура используются:

  • Подключение CSS-классов через classes на уровне шага или глобально.
  • Переопределение стандартных стилей Shepherd.js через CSS.
  • Настройка цветов кнопок, размеров шагов, шрифтов и теней.
.custom-step {
  background-color: #f0f8ff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.shepherd-button-primary {
  background-color: #007acc;
  color: white;
  border-radius: 6px;
}

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

Оглавление