Переопределение стилей

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

Основные подходы к стилизации

Shepherd.js использует систему классов и атрибутов, которые можно переопределять с помощью CSS. Основные элементы для стилизации:

  1. Подсказка (.shepherd-content) Отвечает за контейнер, в котором отображается заголовок, текст и кнопки. Основные свойства, которые чаще всего переопределяются:

    • background-color — цвет фона подсказки
    • color — цвет текста
    • padding — внутренние отступы
    • border-radius — скругление углов

    Пример CSS-переопределения:

    .shepherd-content {
    background-color: #1e1e2f;
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
}

  2. Заголовок подсказки (.shepherd-title) Позволяет изменять шрифт, размер и цвет заголовка:

    .shepherd-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffcc00;
}

  3. Текст подсказки (.shepherd-text) Для блока текста можно настроить межстрочный интервал, размер шрифта и цвет:

    .shepherd-text {
    font-size: 14px;
    line-height: 1.6;
    color: #cccccc;
}

  4. Кнопки управления (.shepherd-button) Shepherd.js позволяет добавлять кнопки для навигации по туру. Переопределение стилей кнопок особенно важно для соответствия стилю интерфейса:

    .shepherd-button {
    background-color: #ff5500;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.shepherd-button:hover {
    background-color: #ff7700;
}

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

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

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

tour.addStep({
  id: 'example-step',
  text: 'Это пример шага с кастомным стилем',
  attachTo: {
    element: '#target-element',
    on: 'bottom'
  },
  classes: 'highlight-step'
});

Соответствующий CSS:

.custom-shepherd-step {
    background-color: #222;
    color: #eee;
}

.highlight-step {
    border: 2px solid #ff0000;
}

Переопределение стрелок подсказки

Shepherd.js использует стрелки для указания на элементы интерфейса. Стиль стрелок задаётся через псевдоэлементы CSS (::before, ::after) и классы .shepherd-arrow:

.shepherd-arrow {
    border-color: #ffcc00;
}

.shepherd-arrow::before {
    border-color: #ffcc00 transparent transparent transparent;
}

Можно задавать разные цвета для разных направлений стрелок через вложенные селекторы:

.shepherd-step.shepherd-theme-arrows .shepherd-arrow {
    border-width: 10px;
}

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

Shepherd.js легко интегрируется с CSS-фреймворками (Bootstrap, Tailwind). Для этого можно:

  • Добавить фреймворковые классы в classes при создании шага
  • Переопределить стандартные стили Shepherd для соответствия общей визуальной теме

Пример с Tailwind:

tour.addStep({
  id: 'tailwind-step',
  text: 'Тур с Tailwind стилями',
  attachTo: { element: '#btn', on: 'right' },
  classes: 'bg-blue-600 text-white p-4 rounded-lg shadow-lg'
});

Анимации и переходы

Shepherd.js поддерживает CSS-анимации при открытии и закрытии подсказок. Для этого достаточно добавить классы с transition и transform:

.shepherd-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.shepherd-content.shepherd-open {
    transform: translateY(0);
    opacity: 1;
}

.shepherd-content.shepherd-closed {
    transform: translateY(-10px);
    opacity: 0;
}

Важные нюансы

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

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

Оглавление