@finastra/guided-tour NPM

GuidedTour

Installation

npm i @finastra/guided-tour

Usage

Import

import @finastra/guided-tour
this.data = {
    steps: [
        {
            title: 'Step 1'
            description: 'Lorem ipsum dolor sit amet. Ab rerum totam et vero error est commodi autem et dolores magnam sed harum quibusdam sed tempore eligendi et quos perspiciatis. Eos autem natus eum iusto sunt sit laborum dolores At reprehenderit cumque. '
        },
        {
            title: 'Step 2'
            description: 'Lorem ipsum dolor sit amet. Ab rerum totam et vero error est commodi autem et dolores magnam sed harum quibusdam sed tempore eligendi et quos perspiciatis. Eos autem natus eum iusto sunt sit laborum dolores At reprehenderit cumque. '
        }
    ]
}

<fds-guided-tour showStepInfo data="${this.data}" show id="guided-tour-demo"></fds-guided-tour>

Data Interface

export interface TourStep {
  selector?: string;
  title: string;
  description?: string;
  placement?: Placement;
  marginTop?: number;
  marginLeft?: number;
  marginRight?: number;
  marginBottom?: number;
  radius?: number;
  mainAxis?: number;
  crossAxis?: number;
}

export interface Tour {
  stepInfo?: string;
  steps: TourStep[];
}

stepInfo property is a string template. Its default value is : Step ${currentStep} of ${totalSteps}

API

Properties

Property	Attribute	Type	Default	Description
`arrowPosition`		`StyleInfo`	{}
`cardPosition`		`StyleInfo`	{}
`currentStepElement`		`Element \\| null \\| undefined`	"undefined"
`currentStepIndex`	`currentStepIndex`	`number`	0	Current step in the tour.
`data`	`data`	`Tour`	{"steps":[]}	Data for component.
`oldBodyOverflowValue`		`string`	""
`override`
`show`	`show`	`boolean`	false	Whether the tour should display.
`showStepInfo`	`showStepInfo`	`boolean`	false	Whether the step info should display.
`stepCardArrowElement`		`Promise<HTMLElement>`
`stepCardElement`		`Promise<HTMLElement>`