Шаги без привязки к элементам

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

Природа «свободных» шагов

Шаг без привязки — это шаг, у которого отсутствует конфигурация attachTo. В этом случае всплывающее окно (tooltip) отображается относительно центра экрана или в позиции, определяемой настройками по умолчанию.

Пример базового шага без привязки:

tour.addStep({
  id: 'intro',
  text: 'Это вводный шаг, не привязанный к элементу',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

В данном случае Shepherd автоматически позиционирует шаг, поскольку отсутствует указание на конкретный элемент.

Поведение позиционирования

Если attachTo не задан, Shepherd использует встроенную логику позиционирования:

  • Шаг отображается в центре экрана
  • Применяется затемнение фона (если включено useModalOverlay)
  • Нет стрелки, указывающей на элемент
  • Пользовательский фокус направлен исключительно на содержимое шага

Это поведение особенно полезно для:

  • стартовых экранов
  • завершающих сообщений
  • общих инструкций
  • предупреждений или подтверждений

Управление позиционированием вручную

Хотя по умолчанию шаг центрируется, можно дополнительно управлять его положением с помощью CSS или кастомных классов:

tour.addStep({
  id: 'custom-position',
  text: 'Кастомное позиционирование',
  classes: 'my-centered-step',
  buttons: [
    {
      text: 'Ок',
      action: tour.next
    }
  ]
});
.my-centered-step {
  top: 20% !important;
}

Shepherd позволяет гибко переопределять стили, включая позицию, размеры и внешний вид окна.

Использование с модальным оверлеем

Шаги без привязки часто используются совместно с модальным затемнением (modal overlay):

const tour = new Shepherd.Tour({
  useModalOverlay: true
});

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

  • весь интерфейс затемняется
  • акцент смещается на текст шага
  • отсутствует выделение конкретного элемента

Это усиливает восприятие информации, особенно при вводных шагах.

Логические сценарии использования

1. Вступительный шаг

tour.addStep({
  id: 'welcome',
  text: 'Добро пожаловать в систему. Этот тур покажет основные функции.',
  buttons: [
    {
      text: 'Начать',
      action: tour.next
    }
  ]
});

2. Переходный шаг между разделами

tour.addStep({
  id: 'section-break',
  text: 'Теперь рассмотрим настройки профиля.',
  buttons: [
    {
      text: 'Продолжить',
      action: tour.next
    }
  ]
});

3. Завершающий шаг

tour.addStep({
  id: 'finish',
  text: 'Тур завершён. Спасибо за внимание.',
  buttons: [
    {
      text: 'Закрыть',
      action: tour.complete
    }
  ]
});

Комбинирование с привязанными шагами

Свободные шаги эффективно комбинируются с обычными шагами:

tour.addStep({
  id: 'intro',
  text: 'Общий обзор интерфейса',
  buttons: [{ text: 'Далее', action: tour.next }]
});

tour.addStep({
  id: 'button-step',
  text: 'Это кнопка сохранения',
  attachTo: {
    element: '.save-btn',
    on: 'bottom'
  },
  buttons: [{ text: 'Далее', action: tour.next }]
});

Такой подход позволяет:

  • структурировать повествование
  • разделять логические блоки
  • добавлять пояснения вне контекста конкретных элементов

Управление навигацией

Шаги без привязки поддерживают стандартную навигацию:

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

Также возможно добавление произвольной логики:

buttons: [
  {
    text: 'Пропустить',
    action: () => {
      console.log('Тур пропущен');
      tour.complete();
    }
  }
]

Взаимодействие с пользователем

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

  • пользователь не отвлекается на интерфейс
  • внимание сосредоточено на тексте
  • удобно для отображения длинных описаний

Можно добавлять HTML-контент:

text: `
  <h3>Информация</h3>
  <p>Этот шаг содержит подробное описание возможностей системы.</p>
`

Особенности доступности

Шаги без привязки:

  • корректно фокусируются для клавиатурной навигации
  • не зависят от наличия элементов на странице
  • безопасны при асинхронной загрузке интерфейса

Это делает их надёжными для:

  • SPA-приложений
  • динамических интерфейсов
  • ленивой загрузки компонентов

Ошибки и подводные камни

1. Неочевидное положение окна Если используются кастомные стили, шаг может оказаться вне видимой области.

2. Отсутствие контекста Без привязки к элементу пользователь может не понимать, к чему относится информация.

3. Избыточное использование Чрезмерное количество таких шагов делает тур менее интерактивным.

Рекомендации по применению

  • использовать для логических переходов и обобщений
  • сочетать с привязанными шагами
  • избегать перегрузки текстом
  • применять модальный оверлей для усиления фокуса
  • использовать короткие, чёткие формулировки

Расширенные техники

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

if (user.isFirstVisit) {
  tour.addStep({
    id: 'first-time',
    text: 'Это ваш первый визит. Покажем основные возможности.',
    buttons: [{ text: 'Ок', action: tour.next }]
  });
}

Асинхронная логика

tour.addStep({
  id: 'async-step',
  text: 'Загрузка данных...',
  when: {
    show: () => {
      fetchData();
    }
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

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

Оглавление