Guided Tour Step Component

The Guided Tour Step component is used to display additional information during the tour and can target a specific element on the page.

Adding a Tour Step

To add a tour step to a razor page, create a new component in the Guided Tour ChildContent tag. Even though the sequence is not required to be set is highly advisable that this property be set. The tour step name is also a required property that needs to be set.

<GuidedTour ...>
     <ChildContent>
         <GuidedTourStep    
           Title="Custom Buttons" StepName="stepName" TourStepSequence="1" ElementSelector="[data-element-to-select]"
           CancelTourButtonClass="cancel-btn-class" CanCancelTour="false" HeaderClass="my-hdr-class" FooterClass="my-ftr-class"
           ContentClass="my-content-class" CompleteTourButtonText="Complete Tour" CompleteTourButtonClass="complete-btn-class"
           CancelTourButtonText="Cancel Tour" SkipStep="false" NextStepButtonClass="next-btn-class" NextStepButtonText="Next Step"
           OnNavigateNext="@((tourStep) => {})" OnNavigatePrevious="@((tourStep) => {})" OnStepActivated="@((tourStep) => {})" 
           OnStepDeActivated="@((tourStep) => {})" OnTourCanceled="@((tourStep) => {})" OnTourCompleted="@((tourStep) => {})"
           PopupPlacement="PopperPlacement.Auto" PopupStrategy="PopperStrategy.Absolute" PreviousStepButtonClass="previous-btn-class" PreviousStepButtonText="Previous Step"
           WrapperClass="my-step-wrapper">
         <HeaderContent>    
             <div><span>My Header</span></div>    
         </HeaderContent>    
         <ChildContent>    
             <div>...</div>    
         </ChildContent>    
         <FooterContent>    
             <div>    
                 <button class="btn" @onclick="@(() => context.GoToStep("firstStep"))">First Step</button>    
                 <button class="btn" @onclick="@(() => context.PreviousStep())">    
                     <i class="bi bi-cloud-drizzle"></i><span>Prev</span>    
                 </button>    
                 <button class="btn" @onclick="@(() => context.CompleteTour())">Complete</button>    
             </div>    
         </FooterContent>    
     </GuidedTourStep>    
  </ChildContent>
</GuidedTour>

Properties

• StepName* The unique name of the step
• StepName* The unique name of the step
• TourStepSequence* The sequence of this step within the tour
• ElementSelector Optional element selector for this step, this will set where this step is displayed
• CancelTourButtonClass An additional class to append to the default cancel tour button
• CancelTourButtonText The text for the cancel tour button
• CanCancelTour A value indicating if this step can cancel the tour
• ChildContent Custom content to render for the child step. The @context variable can be used to reference the tour step
• CompleteTourButtonText The text for the complete tour button
• CompleteTourButtonClass An additional class to append to the default complete tour button
• ContentClass An additional class to append to the content wrapper
• FooterClass An additional class to append to the footer wrapper.
• FooterContent Custom content to render as the footer. The @context variable can be used to reference the tour step
• HeaderClass An additional class to append to the header wrapper
• HeaderContent Custom content to be rendered in the header. The @context variable can be used to reference the tour step
• NextStepButtonClass An additional class to append to the default next step button
• NextStepButtonText The text for the next step button
• PopupPlacement The position of the tour step
• PopupStrategy Can either be absolute or fixed
• PreviousStepButtonClass An additional class to append to the default previous step button
• PreviousStepButtonText The text for the previous step button
• SkipStep A value indicating if the step should be skipped
• Title If a custom header is not supplied, this will be the title of the step
• WrapperClass An additional class to append to the main wrapper

Callbacks

• OnNavigateNext A callback for the tour is navigating to the next step
• OnNavigatePrevious A callback for the tour is navigating to the previous step
• OnStepActivated A callback for when the tour has been activated
• OnStepDeActivated A callback for when this step has been de-activated
• OnTourCanceled A callback for when the tour is canceled
• OnTourCompleted A callback for when the tour is completed