Темы оформления

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

Настройка темы через defaultStepOptions

Для начала стоит использовать параметр defaultStepOptions при создании тура:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows', // базовая тема с стрелками
    scrollTo: true,
    cancelIcon: {
      enabled: true
    }
  }
});
  • classes – задаёт CSS-класс, который будет применён ко всем шагам по умолчанию.
  • scrollTo – автоматически прокручивает страницу к целевому элементу.
  • cancelIcon.enabled – отображение крестика для закрытия шага.

Shepherd.js поставляется с несколькими встроенными темами:

  • shepherd-theme-default – стандартный минималистичный вид.
  • shepherd-theme-arrows – добавляет стрелки, указывающие на целевой элемент.
  • shepherd-theme-dark – тёмная тема для интерфейсов с тёмной палитрой.

Создание кастомной темы

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

.my-shepherd-theme {
  background-color: #2c3e50;
  color: #ecf0f1;
  border-radius: 8px;
  font-family: 'Arial', sans-serif;
  padding: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.my-shepherd-theme .shepherd-button {
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}

.my-shepherd-theme .shepherd-button:hover {
  background-color: #2980b9;
}

Применение кастомной темы к шагу:

tour.addStep({
  text: 'Это шаг с кастомной темой',
  attachTo: { element: '#button', on: 'bottom' },
  classes: 'my-shepherd-theme',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Настройка стрелок (arrow)

Темы также позволяют управлять видом стрелки, указывающей на элемент:

  • Встроенная тема shepherd-theme-arrows создаёт треугольную стрелку с помощью CSS.
  • Для кастомной стрелки можно использовать псевдоэлементы ::before или ::after:
.my-shepherd-theme.shepherd-arrow::before {
  border-color: #2c3e50 transparent transparent transparent;
}
  • В JS можно включить стрелку через tetherOptions:
tetherOptions: {
  attachment: 'top center',
  targetAttachment: 'bottom center',
  constraints: [{ to: 'window', attachment: 'together' }]
}

Использование нескольких тем в одном туре

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

tour.addStep({
  text: 'Тёмная тема',
  attachTo: { element: '#dark', on: 'top' },
  classes: 'shepherd-theme-dark'
});

tour.addStep({
  text: 'Стрелки и светлая тема',
  attachTo: { element: '#light', on: 'bottom' },
  classes: 'shepherd-theme-arrows'
});

Темы для кнопок и элементов управления

Кнопки и навигационные элементы можно стилизовать независимо, добавляя CSS-классы через объект buttons:

buttons: [
  {
    text: 'Назад',
    classes: 'shepherd-button-secondary',
    action: tour.back
  },
  {
    text: 'Далее',
    classes: 'shepherd-button-primary',
    action: tour.next
  }
]
  • shepherd-button-primary и shepherd-button-secondary – стандартные стили.
  • Можно создать свои классы для кнопок, чтобы поддерживать единый стиль интерфейса.

Динамическая смена темы

Shepherd.js позволяет изменять класс темы после инициализации шага:

const step = tour.addStep({
  text: 'Первоначальная тема',
  attachTo: { element: '#dynamic', on: 'top' },
  classes: 'shepherd-theme-default'
});

step.on('show', () => {
  step.el.classList.remove('shepherd-theme-default');
  step.el.classList.add('my-shepherd-theme');
});

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

Итоговые рекомендации

  • Использовать defaultStepOptions для единообразного базового стиля.
  • Создавать кастомные CSS-классы для полной визуальной интеграции.
  • Комбинировать встроенные темы с кастомными для различных контекстов интерфейса.
  • Управлять стрелками через темы и tetherOptions для точного позиционирования.
  • Стилизовать кнопки отдельно для сохранения консистентного дизайна.

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

Оглавление