Обязательные параметры шага

Каждый шаг в Shepherd.js создаётся через объект конфигурации с набором параметров. Обязательные параметры шага обеспечивают корректное отображение подсказки и взаимодействие с пользователем. Без них шаг не будет работать или вызовет ошибки при запуске тура.

id

Параметр id является уникальным идентификатором шага. Он используется для ссылки на шаг внутри тура, особенно при переходе между шагами с помощью методов next() и back().

Пример использования:

const tour = new Shepherd.Tour();
tour.addStep({
  id: 'intro-step',
  text: 'Добро пожаловать в наше приложение!'
});

Ключевые моменты:

  • id должен быть строкой.
  • Должен быть уникальным в пределах одного тура.
  • Используется для программного управления шагами, навигации и событий.

text

Параметр text отвечает за содержимое подсказки. Это может быть строка или функция, возвращающая строку. Shepherd.js поддерживает форматирование текста через HTML.

Пример с HTML:

tour.addStep({
  id: 'feature-step',
  text: '<strong>Обратите внимание:</strong> здесь находится важная функция.'
});

Особенности:

  • Строка может содержать HTML-теги.
  • Можно использовать шаблонные строки для динамического текста.
  • Без text шаг не будет содержать информацию, и подсказка не имеет смысла.

attachTo

attachTo определяет элемент на странице, к которому будет привязан шаг, и позицию подсказки относительно него. Параметр принимает объект с двумя свойствами:

attachTo: {
  element: '.selector',
  on: 'bottom'
}

Состав параметров:

  • element — CSS-селектор или DOM-элемент.
  • on — позиция подсказки: 'top', 'bottom', 'left', 'right', 'auto'.

Особенности:

  • Если элемент не найден, шаг не будет привязан и может не отображаться корректно.
  • on позволяет контролировать направление стрелки подсказки.

Дополнительные параметры, влияющие на обязательность шага

Хотя id, text и attachTo — ключевые обязательные параметры, есть дополнительные свойства, которые существенно влияют на работу шага, особенно в сложных турах.

buttons

Массив кнопок для управления шагом. Каждая кнопка имеет свойства:

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

Пример:

tour.addStep({
  id: 'button-step',
  text: 'Нажмите кнопку для продолжения',
  attachTo: { element: '#continue', on: 'top' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Особенности:

  • Без кнопок шаг можно закрыть программно, но пользователь не сможет продвигаться по туру самостоятельно.
  • buttons делают шаг интерактивным и позволяют управлять последовательностью.

cancelIcon

Параметр cancelIcon управляет отображением кнопки закрытия шага. Обычно это объект с CSS-классами и текстом, например:

cancelIcon: {
  enabled: true
}

Особенности:

  • Если enabled = false, шаг нельзя закрыть пользователю вручную.
  • Полезно для обязательных шагов, где требуется полное прохождение тура.

scrollTo

Параметр scrollTo управляет прокруткой страницы к элементу, к которому привязан шаг. Может принимать true, false или объект с настройками прокрутки:

scrollTo: { beh * avior: 'smooth', block: 'center' }

Особенности:

  • Обеспечивает видимость целевого элемента.
  • Без него элемент может быть вне области видимости пользователя.

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: { enabled: true },
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  id: 'main-step',
  text: 'Это основной шаг, демонстрирующий ключевую функциональность.',
  attachTo: { element: '#main-feature', on: 'right' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});

Особенности реализации:

  • defaultStepOptions позволяют задать общие настройки для всех шагов.
  • Каждый шаг обязательно должен содержать id, text и attachTo для корректной работы.
  • Использование buttons, cancelIcon и scrollTo делает шаг интерактивным и удобным для пользователя.

Эти параметры формируют основу правильного шага в Shepherd.js и обеспечивают стабильное поведение тура на любой странице.

Оглавление