Onboarding tour

A guided spotlight product tour.

import { BuiOnboardingTour } from 'ng-blatui';

<button (click)="open.set(true)">Start tour</button>
<bui-onboarding-tour [(open)]="open" [steps]="steps" />

API reference

Inputs

Prop	Type	Default	Description
`steps`	`readonly TourStep[]`	`[]`	Ordered steps; each spotlights its `target` element in turn.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the tour is open. Two-way bindable with `[(open)]`.

Types

TourStep

Field	Type	Description
`target`	`string`	CSS selector of the element to spotlight for this step.
`title`	`string`	Heading shown in the step's popover.
`body`	`string`	Body text shown under the title.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.