Стандартные кнопкиNext и Back

В библиотеке Shepherd.js навигация по шагам тура строится вокруг стандартных кнопок Next и Back. Они обеспечивают линейное или частично нелинейное перемещение пользователя между шагами, формируя управляемый сценарий взаимодействия с интерфейсом.

Кнопки определяются в конфигурации каждого шага и могут быть гибко настроены: от простого перехода вперёд/назад до выполнения пользовательской логики перед сменой шага.

Базовая структура кнопок

Кнопки задаются в массиве buttons внутри объекта шага:

const tour = new Shepherd.Tour();

tour.addStep({
  id: 'step-1',
  text: 'Описание шага',
  buttons: [
    {
      text: 'Next',
      action: tour.next
    }
  ]
});

Каждая кнопка — это объект со следующими основными свойствами:

  • text — текст, отображаемый на кнопке
  • action — функция, выполняемая при нажатии
  • classes — дополнительные CSS-классы
  • secondary — булевый флаг для вторичной кнопки (визуальное оформление)

Кнопка Next

Кнопка Next переводит тур на следующий шаг. В стандартной реализации используется метод:

action: tour.next

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

tour.addStep({
  id: 'step-2',
  text: 'Второй шаг',
  buttons: [
    {
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ]
});

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

  • автоматически определяет следующий шаг по порядку добавления
  • не требует указания конкретного id
  • учитывает динамическое добавление шагов

Кнопка Back

Кнопка Back возвращает к предыдущему шагу:

action: tour.back

Особенности поведения:

  • перемещение происходит строго к предыдущему шагу в истории тура
  • при отсутствии предыдущего шага кнопка может быть скрыта или неактивна (в зависимости от логики разработчика)

Кастомизация текста кнопок

Текст кнопок задаётся вручную и может быть локализован:

buttons: [
  {
    text: 'Назад',
    action: tour.back
  },
  {
    text: 'Далее',
    action: tour.next
  }
]

Часто используется для адаптации интерфейса под язык приложения.

Управление порядком кнопок

Порядок кнопок определяется их расположением в массиве:

buttons: [
  { text: 'Next', action: tour.next },
  { text: 'Back', action: tour.back }
]

В этом случае кнопка «Next» будет слева, а «Back» — справа.

Стилизация кнопок

Для визуального оформления используются CSS-классы:

buttons: [
  {
    text: 'Back',
    action: tour.back,
    classes: 'shepherd-button-secondary'
  },
  {
    text: 'Next',
    action: tour.next,
    classes: 'shepherd-button-primary'
  }
]

Также можно добавлять собственные классы:

classes: 'my-custom-button'

Вторичные кнопки (secondary)

Флаг secondary: true применяется для визуального различия:

{
  text: 'Back',
  action: tour.back,
  secondary: true
}

Такая кнопка обычно имеет менее заметный стиль (например, серый цвет).

Условное отображение кнопок

Кнопки могут добавляться динамически в зависимости от логики:

buttons: [
  ...(isFirstStep ? [] : [{
    text: 'Back',
    action: tour.back
  }]),
  {
    text: 'Next',
    action: tour.next
  }
]

Типичные сценарии:

  • скрытие кнопки Back на первом шаге
  • изменение текста последней кнопки на “Завершить”

Замена Next на Finish

На последнем шаге вместо перехода вперёд используется завершение тура:

{
  text: 'Finish',
  action: tour.complete
}

Метод complete():

  • завершает тур
  • вызывает события завершения
  • очищает состояние

Выполнение дополнительной логики

Кнопки могут выполнять произвольные действия:

{
  text: 'Next',
  action: () => {
    console.log('Переход к следующему шагу');
    tour.next();
  }
}

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

  • валидация формы перед переходом
  • отправка аналитики
  • изменение состояния приложения

Асинхронные действия

Поддерживается выполнение асинхронной логики:

{
  text: 'Next',
  action: async () => {
    await saveData();
    tour.next();
  }
}

Важно контролировать:

  • блокировку повторных нажатий
  • обработку ошибок

Отключение кнопок

Shepherd.js напрямую не предоставляет API для disabled, но можно реализовать через:

  • кастомные классы
  • условный рендеринг
  • пользовательскую логику

Пример:

{
  text: 'Next',
  action: () => {
    if (!isValid) return;
    tour.next();
  },
  classes: 'disabled-button'
}

Работа с историей шагов

Кнопка Back использует внутреннюю историю переходов. Это означает:

  • при пропуске шагов через show(id) история сохраняется
  • возврат происходит по фактическому пути, а не по порядку шагов

Программное управление вместо стандартных кнопок

Вместо встроенных кнопок можно полностью управлять туром извне:

document.querySelector('#nextBtn').addEventListener('click', () => {
  tour.next();
});

В таком случае массив buttons можно не использовать.

Обработка крайних случаев

Первый шаг:

  • кнопка Back обычно отсутствует

Последний шаг:

  • Next заменяется на Complete

Отсутствие кнопок:

  • тур может быть полностью автоматическим или управляться событиями

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

  • минимизировать количество кнопок на шаге
  • сохранять единый стиль текста (например, всегда “Далее”, а не “Next”)
  • избегать перегрузки пользовательской логикой внутри action
  • использовать secondary для визуального приоритета действий
  • на последнем шаге явно указывать завершение тура

Пример полного шага

tour.addStep({
  id: 'example-step',
  text: 'Пример шага с полной настройкой кнопок',
  buttons: [
    {
      text: 'Назад',
      action: tour.back,
      classes: 'btn-back',
      secondary: true
    },
    {
      text: 'Далее',
      action: () => {
        console.log('Переход вперед');
        tour.next();
      },
      classes: 'btn-next'
    }
  ]
});

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

Оглавление