@finastra/guided-tour

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>

Methods

Method	Type
back	(): void
next	(): void
start	(currentTourIndex?: number): void
stop	(): void

Slots

Name	Description
back-button	Content for back button.
done-button	Content for done button.
next-button	Content for next button.
skip-button	Content for skip button.

CSS Custom Properties

Property	Default	Description
--fds-guided-tour-card-max-width	"500px"	Max width of panel information.