Кастомные темы

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

Определение кастомной темы

Кастомная тема в Driver.js задаётся через объект конфигурации options при инициализации драйвера. Основной параметр — className, который указывает на CSS-класс, применяемый к каждому шагу тура.

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

После этого все шаги будут использовать стили, определённые в классе custom-theme. Это позволяет полностью контролировать оформление: цвета, шрифты, размеры, отступы и т. д.

Стилизация подсказок

Основные элементы, которые можно кастомизировать:

  1. Контейнер подсказки Класс .driver-tooltip отвечает за основное окно подсказки. Можно менять фон, границы, тени и закругления:
.custom-theme .driver-tooltip {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-family: 'Segoe UI', sans-serif;
}
  1. Заголовок и текст Для заголовка используется класс .driver-header, для текста — .driver-description. Это позволяет отдельно стилизовать шрифты, размеры и отступы.
.custom-theme .driver-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.custom-theme .driver-description {
    font-size: 14px;
    line-height: 1.6;
}
  1. Кнопки навигации Кнопки управления (Next, Previous, Close) можно стилизовать через классы .driver-next-btn, .driver-prev-btn и .driver-close-btn:
.custom-theme .driver-next-btn,
.custom-theme .driver-prev-btn {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-theme .driver-next-btn:hover,
.custom-theme .driver-prev-btn:hover {
    background-color: #2980b9;
}

Позиционирование подсказок

Driver.js автоматически рассчитывает позицию подсказки относительно элемента, но можно задать своё смещение через параметры top, left, bottom, right на каждом шаге:

driver.defineSteps([
    {
        element: '#profile-button',
        popover: {
            title: 'Профиль пользователя',
            description: 'Здесь отображаются настройки профиля',
            position: 'bottom',
            offset: {
                top: 10,
                left: 0
            }
        }
    }
]);

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

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

Для гибкой кастомизации удобно применять CSS-переменные, которые затем можно менять динамически через Jav * aScript:

.custom-theme {
    --tooltip-bg: #34495e;
    --tooltip-color: #ecf0f1;
    --button-bg: #e74c3c;
    --button-hover-bg: #c0392b;
}

.custom-theme .driver-tooltip {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
}

.custom-theme .driver-next-btn {
    background-color: var(--button-bg);
}

.custom-theme .driver-next-btn:hover {
    background-color: var(--button-hover-bg);
}

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

Расширение темы через JavaScript

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

driver.on('next', (step) => {
    if(step.index === 1) {
        document.querySelector('.driver-tooltip').classList.add('highlight-step-2');
    }
});

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

Комбинирование стандартной и кастомной темы

Driver.js позволяет использовать несколько классов одновременно, комбинируя стандартный стиль и собственные изменения:

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

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

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

  • Сохранять единообразие: все цвета, шрифты и отступы должны соответствовать UI приложения.
  • Использовать переменные CSS: для быстрого переключения между светлой и тёмной темой.
  • Минимизировать inline-стили: они усложняют поддержку и ломают наследование.
  • Тестировать на разных разрешениях: подсказки могут неправильно позиционироваться на мобильных устройствах.

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

Оглавление