Свойства конфигурации

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

animate

Свойство animate управляет включением или отключением анимации при переходе между шагами. Допустимые значения:

animate: true // включена анимация
animate: false // отключена анимация

При значении true элемент плавно подсвечивается и перемещается к центру экрана, создавая визуально комфортное сопровождение для пользователя.

opacity

Управляет прозрачностью затемнения фона вокруг целевого элемента. Значение задается в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

opacity: 0.5

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

padding

Определяет отступ между целевым элементом и рамкой подсветки.

padding: 10

Позволяет создавать визуальный «воздушный» промежуток, предотвращая наложение подсветки на содержимое элемента.

allowClose

Устанавливает, можно ли закрывать всплывающий шаг кликом вне целевого элемента или нажатием клавиши Escape.

allowClose: true

Если установлено в false, пользователь может пройти шаг только через кнопки управления.

stageBackground

Задает цвет фона вокруг целевого элемента.

stageBackground: '#ffffff'

Часто используется для создания контрастного эффекта или соответствия фирменной палитре интерфейса.

nextBtnText и prevBtnText

Позволяют настраивать текст кнопок навигации:

nextBtnText: 'Далее',
prevBtnText: 'Назад'

Поддерживается локализация интерфейса без необходимости изменения кода самой библиотеки.

closeBtnText

Текст кнопки закрытия шага:

closeBtnText: 'Закрыть'

Используется, когда allowClose включен и требуется явная кнопка для завершения шага.

highlightPadding

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

highlightPadding: 5

Позволяет визуально выделить элемент более аккуратно, особенно если у него тонкая граница или маленькая площадь.

stagePadding

Отступ между рамкой шага и затемнённой областью. Отличается от padding тем, что влияет не на целевой элемент, а на обрамляющую подсветку.

stagePadding: 20

onNext, onPrevious, onClose, onStart, onComplete

Функции обратного вызова для управления поведением шагов. Они позволяют выполнять действия при переходе между шагами или завершении руководства:

onNext: (element) => { console.log('Следующий шаг', element); },
onClose: () => { console.log('Руководство закрыто'); }

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

nextStep и prevStep

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

nextStep: 'step-3',
prevStep: 'step-1'

Это полезно для условной навигации или пропуска некоторых шагов на основе состояния интерфейса.

placement

Определяет положение подсказки относительно целевого элемента. Возможные значения: top, bottom, left, right, auto.

placement: 'bottom'

При auto библиотека автоматически выбирает оптимальное положение, чтобы шаг не выходил за границы экрана.

draggable

Позволяет делать подсказку перемещаемой пользователем.

draggable: true

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

showButtons и showCloseButton

Управляют отображением стандартных кнопок управления на шаге:

showButtons: true,
showCloseButton: false

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

keyboardControl

Включает или отключает навигацию по шагам с помощью клавиатуры (стрелки, Escape):

keyboardControl: true

Позволяет повысить доступность и удобство использования интерактивного руководства.

steps

Массив объектов, описывающих каждый шаг. Ключи внутри шага включают element, popover, placement, padding и другие свойства, которые переопределяют глобальные настройки для конкретного шага:

steps: [
  {
    element: '#menu',
    popover: {
      title: 'Главное меню',
      description: 'Здесь находятся основные функции',
      position: 'right'
    }
  },
  {
    element: '#submit',
    popover: {
      title: 'Кнопка отправки',
      description: 'Нажмите, чтобы отправить форму',
      position: 'bottom'
    }
  }
]

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

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

Оглавление