Подключение стилей

Driver.js — это библиотека для создания интерактивных гидов по интерфейсу веб-приложений. Для корректного отображения всех элементов подсветки и подсказок необходимо подключить CSS-стили, которые идут в комплекте с библиотекой. Без них компоненты Driver.js не будут отображаться должным образом: подсветка элементов, стрелки, тултипы и оверлеи останутся невидимыми или деформированными.

Основной способ подключения стилей

В стандартной установке через npm или yarn CSS-файл находится в пакете driver.js. Для подключения в проект используется:

<link rel="stylesheet" href="node_modules/driver.js/dist/driver.min.css">

или через импорт в JavaScript/TypeScript:

import 'driver.js/dist/driver.min.css';

Особенности:

  • В случае сборки через Webpack или Vite, импорт через JS обеспечит автоматическую обработку стилей бандлером.
  • При использовании CDN подключение выглядит так:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@0.10.2/dist/driver.min.css">

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

Настройка темы и кастомизация

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

Пример переопределения стилей тултипа:

.driver-tooltip {
    background-color: #2c3e50;
    color: #ecf0f1;
    font-size: 16px;
    border-radius: 8px;
}

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

Ключевые классы для стилизации:

  • .driver-tooltip — контейнер подсказки.
  • .driver-arrow — стрелка, указывающая на элемент.
  • .driver-overlay — затемнённый фон.
  • .driver-highlight — подсвечиваемый элемент.
  • .driver-close-btn — кнопка закрытия гида.

Изменяя эти классы, можно полностью интегрировать стиль гида в дизайн приложения.

Особенности адаптивного отображения

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

Пример медиазапроса:

@media (max-width: 768px) {
    .driver-tooltip {
        font-size: 14px;
        max-width: 220px;
    }
}

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

При использовании сторонних CSS-фреймворков (Bootstrap, Tailwind, Material UI) возможны конфликты стилей. Основные правила:

  • Убедиться, что z-index для .driver-overlay выше, чем для остальных элементов страницы.
  • Проверить, что стандартные свойства position, display и box-sizing для .driver-tooltip не переопределяются глобальными стилями.
  • При необходимости использовать префиксы или дополнительный селектор для изоляции стилей Driver.js.

Динамическая подгрузка стилей

В случаях, когда гид создается динамически на отдельной странице или через SPA, CSS можно подгружать программно:

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'node_modules/driver.js/dist/driver.min.css';
document.head.appendChild(link);

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

Проверка корректности подключения

После подключения CSS необходимо убедиться, что:

  1. Оверлей отображается полупрозрачным и покрывает весь экран.
  2. Подсвечиваемый элемент выделен яркой рамкой.
  3. Тултип содержит стрелку, текст и кнопки навигации.
  4. Позиционирование тултипа корректно для всех размеров экрана.

Любое несоответствие обычно связано с отсутствием CSS-файла, конфликтом с глобальными стилями или ошибками версии.

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

Оглавление