Туры для форм

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

Инициализация Shepherd

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

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

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

Ключевые моменты и настройки:

  • scrollTo — плавная прокрутка к элементу при открытии шага.
  • cancelIcon — позволяет закрыть тур в любой момент.
  • classes — подключение темы для визуального оформления.
  • useModalOverlay — затемнение фона, чтобы фокус оставался на форме.

Создание шагов тура для формы

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

tour.addStep({
  id: 'username-step',
  text: 'Введите ваш логин в это поле. Логин должен быть уникальным.',
  attachTo: { element: '#username', on: 'bottom' },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.addStep({
  id: 'password-step',
  text: 'Введите пароль. Минимальная длина — 8 символов.',
  attachTo: { element: '#password', on: 'bottom' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});

tour.addStep({
  id: 'submit-step',
  text: 'Нажмите кнопку, чтобы отправить форму.',
  attachTo: { element: '#submit-btn', on: 'top' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Завершить', action: tour.complete }
  ]
});

Особенности работы с формами:

  • Шаги следует привязывать к видимым элементам, иначе Shepherd может не отобразить подсказку.
  • Использование attachTo обеспечивает правильное позиционирование подсказки относительно поля.
  • Кнопки навигации можно кастомизировать, включая дополнительные действия (например, валидацию поля перед переходом к следующему шагу).

Динамические формы и валидация

В современных приложениях поля могут появляться или исчезать в зависимости от пользовательского ввода. Для корректного отображения тура необходимо учитывать асинхронность и изменяемость DOM.

const passwordStep = tour.addStep({
  id: 'password-step',
  text: 'Введите пароль.',
  attachTo: { element: '#password', on: 'bottom' },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: () => {
        const password = document.querySelector('#password').value;
        if (password.length < 8) {
          alert('Пароль слишком короткий');
        } else {
          tour.next();
        }
      }
    }
  ]
});

Важные моменты:

  • Проверка условий перед переходом к следующему шагу помогает предотвратить ошибки.
  • Shepherd позволяет использовать кастомные действия на кнопках для валидации и выполнения дополнительных функций.
  • При динамическом изменении формы можно обновлять шаги тура через step.updateStepOptions().

Продвинутые возможности

  • Переход к шагу по ID: tour.show('step-id') позволяет начать тур с любого места.
  • Использование модальных окон и оверлеев: useModalOverlay: true помогает концентрировать внимание на форме.
  • Поддержка событий: Shepherd генерирует события (show, hide, complete), которые позволяют интегрировать тур с логикой приложения.
tour.on('complete', () => {
  console.log('Тур завершен');
});

tour.on('show', (event) => {
  console.log(`Показан шаг: ${event.step.id}`);
});

Советы по оптимизации туров для форм

  1. Минимизировать количество шагов, чтобы не перегружать пользователя.
  2. Фокусировать внимание на ключевых полях с помощью useModalOverlay.
  3. Обрабатывать скрытые или динамически добавляемые поля перед показом шага.
  4. Использовать кастомные стили для выделения полей, например, добавляя классы к элементу формы на этапе шага.
tour.on('show', (event) => {
  const el = event.step.options.attachTo.element;
  el.classList.add('highlighted-field');
});
tour.on('hide', (event) => {
  const el = event.step.options.attachTo.element;
  el.classList.remove('highlighted-field');
});

Эта техника помогает визуально акцентировать внимание на активном поле формы.

Интеграция с реактивными фреймворками

В Vue.js, React или Angular важно учитывать, что DOM может быть обновлен после рендеринга компонента. Для корректной работы тура:

  • Инициализировать Shepherd после полной отрисовки формы.
  • Использовать nextTick или useEffect для гарантии наличия элементов.
  • При изменении формы динамически обновлять шаги или привязывать новые элементы через attachTo.

Пример полного сценария

tour.start(); // Запуск тура после инициализации

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

Оглавление