Демонстрация новых функций

Для использования Shepherd.js необходимо создать экземпляр тура через конструктор Shepherd.Tour. Он принимает объект конфигурации с глобальными настройками, которые будут применяться ко всем шагам:

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

Ключевые моменты:

  • defaultStepOptions задаёт единые свойства для всех шагов, такие как класс оформления, поведение прокрутки и отображение кнопки закрытия.
  • useModalOverlay: true добавляет затемнённый фон, акцентируя внимание на текущем шаге.

Создание шагов тура

Каждый шаг создаётся методом addStep, который принимает уникальный идентификатор шага и объект конфигурации:

tour.addStep({
  id: 'intro',
  text: 'Это первый шаг нового тура, демонстрирующий базовые возможности.',
  attachTo: {
    element: '.header-logo',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.addStep({
  id: 'feature-highlight',
  text: 'Здесь можно выделить важную функциональность.',
  attachTo: {
    element: '.main-feature',
    on: 'right'
  },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Особенности нового подхода:

  • attachTo позволяет привязать шаг к элементу DOM с указанием направления подсказки.
  • Массив buttons поддерживает комбинацию действий: переход вперёд, назад и кастомные функции.

Использование событий для интерактивности

Shepherd.js предоставляет мощный механизм событий для управления поведением тура:

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

tour.on('complete', () => {
  console.log('Тур завершён');
});

tour.on('cancel', () => {
  console.log('Тур отменён пользователем');
});

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

Анимации и кастомизация внешнего вида

Новые функции Shepherd.js включают поддержку CSS-анимаций и динамического изменения стилей:

tour.addStep({
  id: 'animated-step',
  text: 'Этот шаг демонстрирует анимацию появления.',
  attachTo: { element: '.animated-element', on: 'top' },
  classes: 'shepherd-theme-arrows animated-step',
  buttons: [
    {
      text: 'Закрыть',
      action: tour.complete
    }
  ]
});

Советы по кастомизации:

  • Использование собственных CSS-классов позволяет менять фон, анимацию появления и тип стрелок.
  • Shepherd.js поддерживает динамическое добавление/удаление классов при событиях show и hide, что расширяет возможности визуальных эффектов.

Навигация и управление шагами

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

tour.addStep({
  id: 'conditional-step',
  text: 'Этот шаг показывается только при выполнении условия.',
  when: {
    show: () => {
      return document.querySelector('.feature-enabled') !== null;
    }
  },
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

Применение условий:

  • when.show позволяет определить, должен ли шаг быть видимым, основываясь на состоянии DOM или пользовательских данных.
  • Динамическая навигация повышает гибкость туров и позволяет создавать персонализированные сценарии.

Интеграция с внешними библиотеками

Shepherd.js легко интегрируется с фреймворками и библиотеками анимации:

tour.on('show', (step) => {
  gsap.from(step.el, { opacity: 0, y: -20, duration: 0.5 });
});

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

Работа с асинхронными данными

Новые возможности включают поддержку асинхронных операций при показе шагов:

tour.addStep({
  id: 'async-step',
  text: async () => {
    const data = await fetch('/api/feature-info').then(res => res.json());
    return `Информация о функции: ${data.description}`;
  },
  attachTo: { element: '.feature-info', on: 'bottom' },
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});

Преимущества:

  • Поддержка асинхронных текстов позволяет загружать динамический контент перед отображением подсказки.
  • Это особенно полезно для приложений с постоянно обновляющимися данными или пользовательскими настройками.

Резюме возможностей новых функций

  • Полная настройка шагов через defaultStepOptions.
  • Динамическая привязка шагов к DOM-элементам и условия их показа.
  • Интеграция с CSS-анимациями и внешними библиотеками для визуальных эффектов.
  • События show, hide, complete, cancel для расширенного управления.
  • Поддержка асинхронного контента для шагов, что обеспечивает актуальность информации.

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

Оглавление