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

Shepherd.js предоставляет возможность создавать собственные темы, чтобы полностью контролировать внешний вид и стиль подсказок (тултипов). Темы в Shepherd.js определяются через объект defaultStepOptions при инициализации тура, где ключевым параметром является свойство classes, задающее CSS-классы для подсказок.

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'custom-theme',
    scrollTo: true
  }
});

В данном примере к каждому шагу тура будет применён CSS-класс custom-theme. Именно через такие классы реализуется полная кастомизация: цвета, шрифты, тени, анимации и размеры.

Структура CSS для кастомной темы

Создание собственной темы начинается с определения набора CSS-правил, которые будут влиять на все элементы подсказки. Основные компоненты, которые можно стилизовать:

  1. Основной контейнер подсказки Класс .shepherd-element является оболочкой тултипа. Через него задаются фон, отступы, скругления и тени.

    .custom-theme.shepherd-element {
  background-color: #1a1a1a;
  color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-family: 'Roboto', sans-serif;
}

  2. Заголовок подсказки Заголовок шага, если используется опция title, оформляется через .shepherd-title.

    .custom-theme .shepherd-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

  3. Тело подсказки Текст описания шагов — .shepherd-text. Можно задавать отступы, межстрочные интервалы и цвет текста.

    .custom-theme .shepherd-text {
  font-size: 14px;
  line-height: 1.5;
}

  4. Кнопки навигации Shepherd поддерживает кастомные кнопки с классом .shepherd-button. Их стилизация позволяет полностью изменить вид навигации.

    .custom-theme .shepherd-button {
  background-color: #ff6f61;
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-theme .shepherd-button:hover {
  background-color: #e65a50;
}

  5. Стрелка подсказки Стрелка, указывающая на элемент, задаётся через .shepherd-arrow. Можно менять цвет и размеры, чтобы стрелка гармонировала с основной палитрой.

    .custom-theme .shepherd-arrow {
  color: #1a1a1a;
}

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

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

:root {
  --tooltip-bg: #1a1a1a;
  --tooltip-color: #fff;
  --tooltip-padding: 16px;
}

.custom-theme.shepherd-element {
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: var(--tooltip-padding);
}

Изменение переменных в JavaScript позволяет менять тему в зависимости от контекста:

document.documentElement.style.setProperty('--tooltip-bg', '#283593');
document.documentElement.style.setProperty('--tooltip-color', '#ffeb3b');

Применение темы к конкретным шагам

Хотя defaultStepOptions задаёт тему для всех шагов тура, можно переопределять тему на уровне отдельного шага через свойство classes:

tour.addStep({
  title: 'Специальный шаг',
  text: 'Этот шаг использует отдельную тему',
  classes: 'custom-step-theme',
  attachTo: {
    element: '#special-button',
    on: 'bottom'
  }
});

Таким образом, каждый шаг может иметь уникальное оформление, отличное от общей темы тура.

Поддержка адаптивности и анимаций

Shepherd.js позволяет добавлять анимации появления/исчезновения через CSS-переходы или keyframes. Адаптивность обеспечивается через медиазапросы, например:

@media (max-width: 768px) {
  .custom-theme.shepherd-element {
    font-size: 12px;
    padding: 12px;
  }

  .custom-theme .shepherd-button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

Для анимации можно использовать классы:

.custom-theme.shepherd-element {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.custom-theme.shepherd-element.shepherd-open {
  opacity: 1;
  transform: translateY(0);
}

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

Shepherd.js позволяет легко использовать существующие CSS-фреймворки, такие как Tailwind или Bootstrap. Достаточно указать соответствующие классы при создании тура:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'bg-gray-800 text-white p-4 rounded shadow-lg',
    scrollTo: true
  }
});

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

Итоговая структура кастомной темы

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

  1. Главный класс темы — общий контейнер всех подсказок.
  2. Подклассы для заголовка, текста, кнопок и стрелок.
  3. Переменные CSS для динамических изменений.
  4. Медиа-запросы для адаптивности.
  5. Анимации через CSS-классы.

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

Оглавление