Guided Tour Component

The Guided Tour component is the main visual component that displays a tour on the page. Multiple tours can be registered as long as they have unique Id's. The GTour component inherits from a base component that in turn implements an interface to ease development and extensibility.

Adding a Tour

To add a tour to a razor page, import the namespace if not globally imported and add the component to the page. Below is an example of all the properties available on the tour component. The Arrow Element details can be found on the respective help page. The child content holds the tour steps and can be found on the respective page.

<GuidedTour TourId="Tour1" OverlayClass="overlay-class" CloseOnOverlayClick="true" 
            HighlightClass="my-highlight-class" HighlightEnabled="true" TourWrapperClass="tour-wrapper-class"
            ArrowClass="my-arrow-class" OverlayEnabled="true" ShowArrow="true"
            OnTourCanceled="@((tour) => {})" OnTourCompleted="@((tour) => {})"
            OnTourStarted="@((tour) => {})" OnTourStepRegistered="@((tourStep) => {})"
            OnTourStepDeRegistered="@((tourStep) => {})">
     <ArrowContent>
         ...
     </ArrowContent>
     <ChildContent>
         ...
     </ChildContent>
</GuidedTour>

Properties

• TourId* The unique identifier of the tour.
• ArrowClass An override class name to style the arrow
• CloseOnOverlayClick A value to indicate if the tour should be stopped when clicking on the overlay
• HighlightClass A class to be appended to a Tour Step Element that is "Focused".
• HighlightEnabled A value to indicate if the highlight class should be appended to the focused element
• OverlayClass An additional class to append to the overlay
• OverlayEnabled A value indicating if the overlay is enabled for the tour
• ShowArrow A value to indicate if the arrow should be rendered for the tour component
• TourWrapperClass An additional class to be appended to the root tour element

Callbacks

• OnTourCanceled A callback for when the tour is canceled
• OnTourCompleted A callback for when the tour is completed
• OnTourStarted A callback for when the tour has started
• OnTourStepRegistered A callback for when a child tour step has been registered
• OnTourStepDeRegistered A callback for when a child tour step has been deregistered