Skip to content

SiTourService documentation

provided in root
✓

Attributes and Methods

NameTypeDefaultDescription
addSteps(...)
(steps: TourStep[]) => voidAdd steps to the tour

Parameters
clearSteps()
() => voidClear all steps
complete()
() => voidFinish the tour
(readonly) onTourCancel
Subject<void>...Event triggered after the tour is cancelled, either through skip button or closing the tour dialog.
(readonly) onTourComplete
Subject<void>...Event triggered after the tour is completed.
setOptions(...)
(options: TourOptions) => voidSets options for the whole tour.

Parameters
start()
() => voidStart the tour

Types Documentation

extends TourStepCommonOptions
Options for each tour step.
Properties
The element, the step should be attached to on the page.
attachTo?: { element: (string | HTMLElement | () => (string | HTMLElement)), on: ModalPosition }
A function that returns a promise. When the promise resolves, the next step will be shown. This can be used to 'clean up' action from beforeShowPromise .
beforeNextPromise?: () => Promise<any> from beforeNextPromise
A function that returns a promise. When the promise resolves, the step will be shown. E.g. use this to open dialogs, etc.
beforeShowPromise?: () => Promise<any> from beforeShowPromise
Unique id for the step. Exposed in DOM as data-step-id
id?: string
Whether Scroll the element into view.
scrollTo?: (boolean | ScrollIntoViewOptions) from scrollTo
Custom handler to perform scrolling.
scrollToHandler?: (element: HTMLElement) => void from scrollToHandler
Body text of the modal.
text?: TranslatableString
Title to be displayed on the modal.
title: TranslatableString
Options for tour
Properties
Default options applied to all tour steps.
defaultStepOptions?: TourStepCommonOptions
Common options for tour step and as default for tour step
Properties
A function that returns a promise. When the promise resolves, the next step will be shown. This can be used to 'clean up' action from beforeShowPromise .
beforeNextPromise?: () => Promise<any>
A function that returns a promise. When the promise resolves, the step will be shown. E.g. use this to open dialogs, etc.
beforeShowPromise?: () => Promise<any>
Whether Scroll the element into view.
scrollTo?: (boolean | ScrollIntoViewOptions)
Custom handler to perform scrolling.
scrollToHandler?: (element: HTMLElement) => void
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Translatable
import
("top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end")
The position of the modal dialog with respect to the highlighted element.
Deprecated: this has no effect, position is automatic

Except where otherwise noted, content on this site is licensed under MIT License.