Tour API · Needless UI

Import

import-tour.ts

import { NuiTour, type NuiTourStep } from '@needless-ui/angular/tour';

A guided tour.

NuiTour: Properties
Name	Type	Default	Description
`steps`Input	`NuiTourStep[]`	`[]`	The steps, in order.
`open`Two-way	`boolean`	`false`	Whether the tour is on.
`step`Two-way	`number`	`0`	The step shown, from 0.
`labels`Input	`Partial<NuiTourLabels>`		Every text it shows, to translate.
`finished`Output	`void`		Emits when the last step is done.
`dismissed`Output	`number`		Emits the step the tour ended on, when it ends early.
`start`Method	`(from?: number) => void`		Starts the tour, from the first step or the one given.
`end`Method	`(finished: boolean) => void`		Ends the tour, finished or dismissed.

A step of the tour.

NuiTourStep: Properties
Name	Type	Default	Description
`target`Property	`string \| Element \| (() => Element \| null)`		What it points at. Without one, the card shows in the middle.
`title`Property	`string`		The card’s title.
`content`Property	`string \| TemplateRef`		Its text, or a template.
`side`Property	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	Where the card goes beside the target.
`align`Property	`'start' \| 'center' \| 'end'`	`'center'`	How the card lines up with the target.
`padding`Property	`number`	`8`	Room around the target in the spotlight, in pixels.
`interactive`Property	`boolean`	`false`	The target can be used while the card is up.
`beforeShow`Property	`() => void \| Promise<void>`		Runs before the step shows. The tour waits for a promise.