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

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

Настройка кнопок для шага

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

const step = {
  id: 'example-step',
  text: 'Это пример шага с кнопками',
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
};

В стандартной конфигурации все кнопки отображаются без условий. Для динамического управления необходимо использовать функцию вместо массива или добавлять условия внутри объекта кнопки.

Использование функции для динамического формирования кнопок

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

const step = {
  id: 'conditional-step',
  text: 'Выберите действие',
  buttons: () => {
    const buttons = [];
    if (appState.isUserLoggedIn) {
      buttons.push({
        text: 'Продолжить',
        action: tour.next
      });
    } else {
      buttons.push({
        text: 'Войти',
        action: () => redirectToLogin()
      });
    }
    return buttons;
  }
};

В данном примере отображается либо кнопка «Продолжить», если пользователь вошёл в систему, либо кнопка «Войти», если нет.

Свойство enabled и его применение

Каждая кнопка может иметь свойство enabled, которое принимает булевое значение или функцию, возвращающую булево значение. Это позволяет включать или отключать кнопку в зависимости от текущего состояния:

const step = {
  id: 'enabled-step',
  text: 'Пример кнопки с условием',
  buttons: [
    {
      text: 'Далее',
      action: tour.next,
      enabled: () => appState.hasCompletedForm
    }
  ]
};

Если enabled возвращает false, кнопка отображается, но становится неактивной, что предотвращает её использование до выполнения определённого условия.

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

Shepherd.js предоставляет методы addButton и removeButton для управления кнопками уже после создания шага. Это позволяет менять интерфейс во время выполнения тура:

const step = tour.addStep({
  id: 'dynamic-step',
  text: 'Кнопки будут меняться динамически',
  buttons: []
});

if (appState.showSpecialOption) {
  step.addButton({
    text: 'Специальная опция',
    action: () => performSpecialAction()
  });
}

Также возможна полная очистка кнопок с помощью метода removeButton(id):

step.removeButton('default-next');

Применение условий на основе предыдущих шагов

Иногда требуется отображать кнопку только после прохождения определённых шагов:

const step = {
  id: 'conditional-after-step',
  text: 'Эта кнопка появится только после шага 1',
  buttons: [
    {
      text: 'Особый шаг',
      action: tour.next,
      enabled: () => tour.getCurrentStep().id === 'step-1'
    }
  ]
};

Использование функции в enabled позволяет проверять текущее положение пользователя в туре и корректно отображать кнопки.

Комбинирование enabled и динамической генерации кнопок

Для максимальной гибкости можно комбинировать оба подхода: возвращать массив кнопок через функцию и одновременно использовать enabled для отдельных кнопок:

buttons: () => [
  {
    text: 'Назад',
    action: tour.back,
    enabled: () => appState.canGoBack
  },
  {
    text: 'Далее',
    action: tour.next,
    enabled: () => appState.canProceed
  }
]

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

Практические советы

  • Для сложных условий используйте функции, возвращающие массив кнопок, вместо статического списка.
  • Свойство enabled удобно для временной блокировки кнопок, без их удаления с интерфейса.
  • Для улучшения UX можно комбинировать скрытие кнопки и её неактивное состояние, чтобы показывать пользователю доступные и недоступные действия.
  • Использование addButton и removeButton эффективно для динамических интерфейсов, где состояние шагов или приложения меняется в реальном времени.

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

Оглавление