Tour

Онбординг-тур: подсветка элементов, шаги, прогресс и возобновление. Pro · Окна и уведомления › Подсказки и туры

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add tour

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Tour } from 'valyro-ui-pro';

Prop	Type	Default
`steps` *	`TourStep[]`		Stops in order; each spotlights its `target` (or is centered without one) with a card of title, text and media.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`step`	`number`		Current step; keep it to resume the tour where the user left.
`defaultStep`	`number`	`0`	Initial `step` when uncontrolled.
`onStepChange`	`(step: number) => void`		Called with the new `step` when it changes.
`onFinish`	`() => void`		Called when the user presses Done on the last step.
`onSkip`	`(step: number) => void`		Called when the user leaves early (✕ or Escape), with the step they left on.
`closeOnEscape`	`boolean`	`true`	Escape skips the tour. Default true.
`closeOnOverlayClick`	`boolean`	`false`	A click on the dimmed backdrop skips the tour. Default false.
`showProgress`	`boolean`	`true`	Progress dots. Default true.
`className`	`string`		Class for the card.
`labels`	`Partial<TourLabels>`		Overrides for the built-in English text; keys left out keep their defaults.