Тур проводит пользователей по странице шаг за шагом. Каждый шаг указывает на элемент карточкой рядом с ним и затемняет остальную страницу вокруг; шаг без целевого элемента показывается по центру.

Шаги — это обычные данные: целевой элемент (селектор, элемент или функция, которая его находит), заголовок и содержимое в виде текста или шаблона. Сначала выполняется beforeShow, поэтому шаг может открыть панель, в которой находится его целевой элемент, а к элементу за пределами видимой области страница прокручивается сама.

Каждая карточка — это диалог. Он модальный, если только шаг не interactive: тогда элементом, на который он указывает, можно пользоваться. Esc завершает тур, а фокус возвращается туда, где был.

Первое знакомство

Четыре шага, первый — без целевого элемента. finished и dismissed позволяют различить два варианта завершения.

Your notes appear here.

Попробуйте сами

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

Dark mode is off.