CSS-классы по умолчанию

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

Основные классы контейнера

Каждый шаг тура создаётся как отдельный контейнер с классом:

<div class="shepherd-element shepherd-theme-arrows">
  • shepherd-element — основной класс для контейнера шага. Отвечает за позиционирование, видимость и базовую структуру.
  • shepherd-theme-arrows — тема, которая определяет стиль стрелок и фон подсказки. Shepherd.js поддерживает несколько предустановленных тем, таких как shepherd-theme-arrows и shepherd-theme-default.

Эти классы можно использовать для переопределения базовых стилей в CSS. Например:

.shepherd-element {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Классы заголовка и контента

Внутри контейнера шага есть отдельные элементы для заголовка и контента:

<div class="shepherd-header">Заголовок</div>
<div class="shepherd-content">Текст подсказки</div>
  • shepherd-header — область заголовка, часто используется для добавления иконок или кастомного форматирования.
  • shepherd-content — основной текст подсказки. Важно, что текст может содержать HTML, поэтому можно вставлять ссылки, списки и другие элементы.

Классы кнопок

Управление кнопками осуществляется через класс shepherd-button, который автоматически добавляется к каждой кнопке шага. Пример структуры:

<button class="shepherd-button shepherd-button-primary">Далее</button>
<button class="shepherd-button shepherd-button-secondary">Назад</button>
  • shepherd-button-primary — основной стиль для действий типа «Далее», «Завершить».
  • shepherd-button-secondary — второстепенные кнопки, например «Назад» или «Пропустить».

CSS можно расширять для добавления анимаций, градиентов или иконок:

.shepherd-button-primary {
    background-color: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.shepherd-button-primary:hover {
    background-color: #0056b3;
}

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

Стрелка, указывающая на элемент интерфейса, формируется с помощью shepherd-arrow. Этот элемент вложен внутрь контейнера и получает позицию автоматически:

<div class="shepherd-arrow" style="left: 50%;"></div>
  • shepherd-arrow — используется для позиционирования и стилей стрелки.
  • Положение стрелки задается через встроенные стили, но можно переопределить CSS для кастомной анимации или формы.

Пример изменения цвета стрелки через CSS:

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

Фоновое затемнение и оверлеи

Shepherd.js может использовать оверлей для фокусировки на активном элементе. Класс по умолчанию:

<div class="shepherd-modal-overlay-container">
    <div class="shepherd-modal-overlay"></div>
</div>
  • shepherd-modal-overlay-container — контейнер для управления видимостью оверлея.
  • shepherd-modal-overlay — полупрозрачный фон. Цвет и прозрачность регулируются CSS.

Пример настройки прозрачности и цвета:

.shepherd-modal-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

Классы для адаптивного позиционирования

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

  • shepherd-step-top, shepherd-step-bottom, shepherd-step-left, shepherd-step-right — положение относительно целевого элемента.
  • Эти классы позволяют создавать медиа-запросы и изменять стили в зависимости от расположения подсказки.

Пример адаптивного стиля:

.shepherd-step-top .shepherd-element {
    margin-bottom: 10px;
}

.shepherd-step-bottom .shepherd-element {
    margin-top: 10px;
}

Пользовательские темы

Создание собственной темы подразумевает переопределение базовых классов:

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

В CSS можно определить:

.custom-shepherd-theme {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #212529;
}

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

Вывод

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

Оглавление