Настройки отступов и смещений

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

Отступы (padding)

Padding определяет пространство между границами подсветки и самим элементом. Это особенно важно, когда элемент содержит внутренние тени, границы или выступающие части, которые не должны перекрываться оверлеем.

  • Синтаксис настройки padding:
const driver = new Driver({
    steps: [
        {
            element: '#button1',
            popover: {
                title: 'Кнопка действия',
                description: 'Нажмите эту кнопку для старта',
                padding: 10
            }
        }
    ]
});
  • Единицы измерения: padding задается в пикселях.
  • Влияние на подсветку: увеличение значения padding расширяет рамку вокруг элемента, создавая дополнительное визуальное пространство.

Примечание: Padding применяется только к подсветке, а не к самой подсказке (popover). Если необходимо изменить расстояние между подсказкой и элементом, используется параметр offset.

Смещения (offset)

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

  • Синтаксис настройки offset:
const driver = new Driver({
    steps: [
        {
            element: '#menu',
            popover: {
                title: 'Главное меню',
                description: 'Здесь находится навигация по сайту',
                position: 'bottom',
                offset: 15
            }
        }
    ]
});
  • Единицы измерения: offset также задается в пикселях.
  • Направление смещения: зависит от позиции popover (top, bottom, left, right). Значение offset увеличивает расстояние между подсказкой и элементом в направлении, противоположном границе элемента.

Комбинированное использование padding и offset

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

const driver = new Driver({
    steps: [
        {
            element: '#inputField',
            popover: {
                title: 'Поле ввода',
                description: 'Введите данные здесь',
                padding: 8,
                position: 'right',
                offset: 12
            }
        }
    ]
});
  • В данном примере подсветка вокруг поля ввода увеличена на 8 пикселей, а поповер смещен на 12 пикселей вправо, создавая аккуратное пространство между элементом и подсказкой.

Настройка глобальных отступов

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

const driver = new Driver({
    padding: 5,
    steps: [
        {
            element: '#step1',
            popover: { title: 'Шаг 1', description: 'Описание шага' }
        },
        {
            element: '#step2',
            popover: { title: 'Шаг 2', description: 'Описание шага', offset: 10 }
        }
    ]
});
  • В примере глобальный padding установлен на 5 пикселей для всех шагов. Для второго шага добавлен локальный offset, который переопределяет стандартное расстояние.

Динамическая корректировка отступов

Иногда требуется изменять padding и offset в зависимости от размера окна или других элементов интерфейса. Driver.js предоставляет возможность изменять параметры шагов динамически перед запуском:

driver.defineSteps([
    {
        element: '#dynamic',
        popover: {
            title: 'Динамический элемент',
            description: 'Отступы меняются в зависимости от окна'
        },
        padding: window.innerWidth > 1024 ? 12 : 6,
        offset: window.innerWidth > 1024 ? 20 : 10
    }
]);
  • Здесь отступы и смещения адаптируются под ширину экрана, обеспечивая корректное отображение на разных устройствах.

Особенности и ограничения

  • Padding не влияет на позицию поповера, только на подсветку.
  • Offset применяется только к popover, не изменяя область подсветки.
  • При небольших элементах большие значения padding могут привести к тому, что подсветка выйдет за пределы видимой области. В таких случаях рекомендуется использовать минимальные отступы.
  • Для элементов с нестандартной версткой необходимо тестировать сочетание padding и offset, чтобы подсказка не перекрывала важные части интерфейса.

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

Оглавление