Конфигурация классов CSS

Driver.js предоставляет гибкую систему кастомизации внешнего вида шагов интерактивного руководства с помощью CSS. Основным инструментом для этого является параметр className, который позволяет назначить пользовательские классы как отдельным шагам, так и всему драйверу в целом.

Пример базового использования:

const driver = new Driver({
    className: 'custom-driver'
});

driver.defineSteps([
    {
        element: '#button-start',
        popover: {
            title: 'Начало',
            description: 'Нажмите эту кнопку, чтобы начать',
        },
        className: 'highlight-step'
    }
]);

В этом примере весь драйвер получает класс custom-driver, а конкретный шаг дополнительно получает highlight-step.

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

Driver.js использует стандартные CSS-классы для структурных элементов:

  • .driver-popover — контейнер подсказки.
  • .driver-target — обводка вокруг целевого элемента.
  • .driver-overlay — затемнение остальной части экрана.
  • .driver-close-btn — кнопка закрытия подсказки.
  • .driver-title — заголовок в поповере.
  • .driver-description — текст описания.

Любой из этих классов можно переопределить через собственный CSS, чтобы изменить внешний вид без изменения логики работы Driver.js.

Пример кастомного стиля:

.custom-driver .driver-popover {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 10px;
    padding: 20px;
}

.custom-driver .driver-target {
    border: 3px solid #e74c3c;
    border-radius: 8px;
}

Назначение отдельных классов шагам

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

driver.defineSteps([
    {
        element: '#profile-pic',
        popover: {
            title: 'Аватар',
            description: 'Здесь отображается ваша фотография',
        },
        className: 'avatar-step'
    },
    {
        element: '#settings',
        popover: {
            title: 'Настройки',
            description: 'Управление профилем и предпочтениями',
        },
        className: 'settings-step'
    }
]);

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

.avatar-step .driver-popover {
    background-color: #3498db;
    color: #fff;
}

.settings-step .driver-popover {
    background-color: #1abc9c;
    color: #2c3e50;
}

Динамическая смена классов

Driver.js позволяет динамически изменять классы шагов в процессе выполнения через методы onNext, onPrevious, onHighlightStarted:

driver.defineSteps([
    {
        element: '#feature',
        popover: {
            title: 'Особенность',
            description: 'Описание функции',
        },
        onHighlightStarted: (element) => {
            element.classList.add('animated-highlight');
        },
        onNext: (element) => {
            element.classList.remove('animated-highlight');
        }
    }
]);

В этом случае целевой элемент получает класс animated-highlight только на время показа шага, что позволяет применять анимации или временные эффекты.

Управление глобальными классами

Помимо классов шагов, можно задавать глобальные классы для всего Driver.js, влияющие на overlay, подсказки и кнопки управления:

const driver = new Driver({
    className: 'my-global-driver',
    stageBackground: 'rgba(0,0,0,0.8)',
    allowClose: true
});

CSS для глобальных изменений:

.my-global-driver .driver-overlay {
    background-color: rgba(0,0,0,0.6);
}

.my-global-driver .driver-close-btn {
    color: #e74c3c;
    font-size: 18px;
}

Комбинация стандартных и пользовательских классов

Driver.js автоматически сохраняет стандартные классы при назначении пользовательских. Это означает, что переопределяя стили через className, необходимо учитывать существующие селекторы .driver-popover, .driver-target и другие. Рекомендуется использовать вложенные селекторы, чтобы изменения не ломали базовую функциональность.

Пример комбинированного стиля:

.custom-step .driver-popover.driver-popover {
    border: 2px dashed #9b59b6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

Такой подход сохраняет совместимость с обновлениями библиотеки и минимизирует конфликты с внутренними стилями.

Практические рекомендации

  1. Использовать className на уровне шага, если нужны уникальные визуальные эффекты для отдельных элементов.
  2. Использовать глобальный className при необходимости изменить весь интерфейс подсказок.
  3. Переопределять стандартные классы через вложенные селекторы для предотвращения конфликтов.
  4. Использовать динамическое добавление/удаление классов через события, чтобы реализовать анимации и интерактивные эффекты.
  5. Стараться не удалять стандартные классы .driver-popover, .driver-target, чтобы сохранить базовую функциональность подсказок.

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

Оглавление