@kit-ng-ui/tour

Step-by-step product tour with a darkened mask and an interactive callout. Mirrors ant-design's <Tour>.

Install

pnpm add @kit-ng-ui/tour

@use '@kit-ng-ui/tour/styles';

Example

steps: KitTourStep[] = [
  { target: '#nav-create', title: 'Create', description: 'Start a new project from here.', placement: 'bottom' },
  { target: '#nav-search', title: 'Search', description: 'Find anything in your workspace.' },
  { title: 'You are all set!', description: 'Welcome to Chim Lợn.', placement: 'center' },
];

<kit-tour [(open)]="open" [steps]="steps" (finishEvent)="onDone()" />

API

| Input | Type | Default | Description | | ------------ | ------------------------------- | -------------------- | --------------------------------------------- | | open | boolean (model) | false | Visibility (two-way bindable). | | steps | readonly KitTourStep[] | [] | | | current | number (model) | 0 | Active step index (two-way bindable). | | maskColor | string | rgba(0,0,0,0.5) | Background mask color. | | padding | number | 8 | Spotlight padding around the target. | | arrow | boolean | true | Whether the panel arrow is rendered. |

| Output | Type | Description | | -------------- | --------- | ------------------------------------------ | | close | void | Emitted when user closes via X or Finish. | | finishEvent | void | Emitted when Finish is clicked. | | stepChange | number | Index of the new active step. |