buttons

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

Основные свойства кнопок

Каждая кнопка задаётся объектом с ключевыми свойствами:

  • text – текст кнопки, который будет отображаться в тултипе.
  • action – функция, выполняемая при нажатии на кнопку. Обычно используется для перехода на следующий шаг (tour.next()) или закрытия тура (tour.complete()).
  • classes – строка с CSS-классами для кастомной стилизации кнопки.
  • secondary – логическое значение (true/false), которое определяет вторичный стиль кнопки (часто визуально отличается от основной).
  • disabled – логическое значение, которое блокирует кнопку до выполнения определённых условий.

Пример базовой кнопки:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    buttons: [
      {
        text: 'Закрыть',
        action: tour.cancel,
        classes: 'shepherd-button-secondary'
      },
      {
        text: 'Далее',
        action: tour.next,
        classes: 'shepherd-button-primary'
      }
    ]
  }
});

В этом примере создаются две кнопки: «Закрыть» с вторичным стилем и «Далее» с основным стилем.

Действия кнопок (Actions)

Shepherd.js позволяет кнопкам выполнять любые функции, включая:

  • Навигацию между шагами:

    • tour.next() – переход к следующему шагу.
    • tour.back() – возврат к предыдущему шагу.
    • tour.show(stepId) – открытие конкретного шага по идентификатору.

  • Управление состоянием тура:

    • tour.complete() – завершение тура.
    • tour.cancel() – отмена тура.

  • Выполнение пользовательской логики: любая функция JavaScript. Например:

{
  text: 'Сохранить и продолжить',
  action: function() {
    saveUserData();
    tour.next();
  },
  classes: 'shepherd-button-primary'
}

В данном случае сначала вызывается функция saveUserData, а затем выполняется переход к следующему шагу.

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

Shepherd.js поддерживает кастомизацию внешнего вида кнопок через CSS-классы. Для удобства можно использовать два основных класса:

  • shepherd-button-primary – основной стиль кнопки, обычно яркая и заметная.
  • shepherd-button-secondary – вторичный стиль, менее заметный.

Для тонкой настройки можно добавить свои классы и прописать их стили в CSS:

.my-custom-button {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  padding: 8px 12px;
  font-weight: bold;
}

И использовать так:

{
  text: 'Пользовательская кнопка',
  action: tour.next,
  classes: 'my-custom-button'
}

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

Кнопки могут добавляться или изменяться динамически на каждом шаге. Это полезно, если необходимо менять логику в зависимости от состояния приложения.

tour.addStep({
  id: 'step-with-dynamic-buttons',
  text: 'Выберите действие:',
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: isUserLoggedIn ? 'Далее' : 'Войти',
      action: function() {
        if (isUserLoggedIn) {
          tour.next();
        } else {
          showLoginModal();
        }
      }
    }
  ]
});

Здесь текст и действие второй кнопки зависят от условия isUserLoggedIn.

Кнопки и события

Shepherd.js позволяет отслеживать события кнопок через стандартные события тура (show, hide, complete) или кастомные обработчики в action. Например:

{
  text: 'Подтвердить',
  action: function() {
    console.log('Кнопка нажата');
    tour.next();
  }
}

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

{
  text: 'Загрузить данные',
  action: async function() {
    await fetchDataFromServer();
    tour.next();
  }
}

Группировка и порядок кнопок

  • Порядок кнопок задаётся массивом в свойстве buttons.
  • Группировка кнопок с разными стилями помогает визуально разделять основное действие (primary) и второстепенные (secondary).

Пример с тремя кнопками:

buttons: [
  { text: 'Назад', action: tour.back, classes: 'shepherd-button-secondary' },
  { text: 'Пропустить', action: tour.cancel, classes: 'shepherd-button-secondary' },
  { text: 'Далее', action: tour.next, classes: 'shepherd-button-primary' }
]

Здесь пользователю явно предлагается основной путь («Далее») и альтернативные действия («Назад», «Пропустить»).

Заключение по функционалу кнопок

Кнопки в Shepherd.js – это мощный инструмент для управления интерактивным туром. Их гибкость позволяет:

  • Создавать последовательные шаги с навигацией.
  • Реализовывать кастомную логику и асинхронные действия.
  • Стильно оформлять кнопки через CSS.
  • Динамически менять поведение и внешний вид в зависимости от условий.

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

Оглавление