Стилизация кнопок

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

Типы кнопок

Shepherd.js использует несколько основных типов кнопок:

  1. next – кнопка для перехода к следующему шагу.
  2. back – кнопка для возврата к предыдущему шагу.
  3. cancel – кнопка для отмены или закрытия тура.
  4. complete – кнопка для завершения тура.

Каждая кнопка задается объектом с ключами text, action и опционально classes. Пример конфигурации шага с кнопками:

const step = tour.addStep({
  title: 'Пример шага',
  text: 'Текст шага здесь',
  buttons: [
    {
      text: 'Назад',
      action: tour.back,
      classes: 'shepherd-button-back'
    },
    {
      text: 'Далее',
      action: tour.next,
      classes: 'shepherd-button-next'
    },
    {
      text: 'Закрыть',
      action: tour.cancel,
      classes: 'shepherd-button-cancel'
    }
  ]
});

Использование встроенных классов

Shepherd.js поставляется с базовыми стилями, которые применяются через стандартные классы:

  • .shepherd-button – общий класс для всех кнопок.
  • .shepherd-button-primary – выделение основной кнопки действия.
  • .shepherd-button-secondary – второстепенная кнопка.

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

buttons: [
  {
    text: 'Далее',
    action: tour.next,
    classes: 'shepherd-button shepherd-button-primary'
  },
  {
    text: 'Назад',
    action: tour.back,
    classes: 'shepherd-button shepherd-button-secondary'
  }
]

Полная кастомизация через CSS

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

.shepherd-button-primary {
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  padding: 8px 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.shepherd-button-primary:hover {
  background-color: #0056b3;
}

.shepherd-button-secondary {
  background-color: #6c757d;
  color: #fff;
  border-radius: 5px;
  padding: 8px 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.shepherd-button-cancel {
  background-color: transparent;
  color: #dc3545;
  border: 1px solid #dc3545;
  border-radius: 5px;
  padding: 8px 16px;
}

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

Динамическая настройка кнопок на шаге

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

tour.on('show', function() {
  const step = tour.getCurrentStep();
  if (step.id === 'final-step') {
    step.updateStepOptions({
      buttons: [
        {
          text: 'Завершить',
          action: tour.complete,
          classes: 'shepherd-button shepherd-button-primary'
        }
      ]
    });
  }
});

Это позволяет создавать более гибкие интерфейсы, где набор кнопок зависит от контекста шага.

Комбинирование с анимациями и эффектами

CSS-анимации и эффекты hover/active можно комбинировать с кнопками Shepherd.js для улучшения пользовательского опыта:

.shepherd-button {
  transition: all 0.3s ease;
}

.shepherd-button:hover {
  transform: scale(1.05);
}

.shepherd-button:active {
  transform: scale(0.95);
  opacity: 0.9;
}

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

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

Shepherd.js легко интегрируется с популярными CSS-фреймворками, такими как Bootstrap или Tailwind. Достаточно указать классы фреймворка в опции classes кнопок:

buttons: [
  {
    text: 'Далее',
    action: tour.next,
    classes: 'btn btn-primary'
  },
  {
    text: 'Назад',
    action: tour.back,
    classes: 'btn btn-secondary'
  }
]

При этом остаются доступными все функции Shepherd.js: переходы шагов, события и динамическая настройка.

Выводы по стилизации кнопок

Сочетание объектной конфигурации кнопок и кастомного CSS позволяет:

  • Создавать уникальные визуальные стили для каждого тура.
  • Разграничивать основные и второстепенные действия.
  • Интегрировать кнопки с существующим дизайном сайта или приложения.
  • Управлять набором кнопок динамически на каждом шаге.

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

Оглавление