cancelIcon

cancelIcon — это параметр, который позволяет управлять отображением и поведением кнопки закрытия в подсказках (tours) Shepherd.js. Он предназначен для улучшения UX, предоставляя пользователю возможность прервать текущий шаг или весь тур одним кликом. Настройка cancelIcon может включать отображение иконки, изменение её внешнего вида и привязку к кастомным действиям.

Основные свойства cancelIcon

cancelIcon является объектом и может содержать следующие ключи:

  • enabled (boolean) — отвечает за включение или отключение кнопки закрытия. По умолчанию значение true.

    const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: false
    }
  }
});

    В данном примере кнопка закрытия будет скрыта на всех шагах тура.

  • label (string) — текстовый атрибут для кнопки закрытия. Он используется для доступности (accessibility) и всплывающих подсказок экранных читалок.

    cancelIcon: {
  label: 'Закрыть тур'
}

  • className (string) — позволяет назначить пользовательский CSS-класс для кнопки закрытия. Это удобно для стилизации.

    cancelIcon: {
  className: 'my-custom-cancel'
}

  • action (function) — функция, которая выполняется при клике на кнопку. Если не задано, по умолчанию выполняется метод tour.cancel(), закрывающий текущий тур.

    cancelIcon: {
  action: () => console.log('Тур прерван')
}

Применение cancelIcon на уровне шага

Каждый шаг Shepherd.js может иметь собственный cancelIcon, который переопределяет настройки по умолчанию, заданные в defaultStepOptions.

Пример:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true,
      label: 'Закрыть',
      className: 'default-cancel'
    }
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Первый шаг',
  cancelIcon: {
    label: 'Закрыть этот шаг',
    className: 'step1-cancel'
  }
});

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

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

Shepherd.js использует стандартные CSS-классы для кнопки закрытия. Основной класс — .shepherd-cancel-icon. Для более сложной стилизации можно использовать кастомные классы через className.

.shepherd-cancel-icon {
  color: #ff0000;
  font-size: 20px;
  cursor: pointer;
}

.step1-cancel {
  color: blue;
  transform: rotate(45deg);
}

Взаимодействие с событиями

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

tour.on('cancel', () => {
  console.log('Тур был закрыт пользователем');
});

Если cancelIcon.action задана, она будет выполнена перед срабатыванием события cancel.

Советы по использованию

  1. Consistency UX: Включение кнопки закрытия на каждом шаге делает интерфейс предсказуемым.
  2. Доступность: Всегда задавайте label для поддержки экранных читалок.
  3. Кастомное поведение: Использование action позволяет интегрировать закрытие тура с логикой приложения, например, сохранять прогресс пользователя перед завершением.
  4. Стилизация: Класс className упрощает интеграцию с существующей системой дизайна.

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

Оглавление