PSC.Blazor.Components.Tours 1.0.3

Guided Tours Blazor Component

This is a new Guided Tours Blazor Component for Blazor WebAssembly and Blazor Server. The components is build with .NET6.

Installation

Download and install the package for NuGet. Then, register the service in your project.

Register the service in Startup.cs (Server Side)

using PSC.Blazor.Components.Tours;
...
...
public void ConfigureServices(IServiceCollection services)
{
    ...
    services.UseTour();
    ...
}

Register the service in Startup.cs (WASM)

using PSC.Blazor.Components.Tours;
...
...
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");

    builder.Services.AddScoped(sp => new HttpClient { 
        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
    });
    builder.Services.UseTour();

    await builder.Build().RunAsync();
}

Add Styles to the _Host.cshtml (optional)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="/_content/PSC.Blazor.Components.Tours/css/styles.css" />

Create a Tour

The tour can be included in a separate Razor Component or on the page.

<GuidedTour TourId="FormGuidedTour" OverlayEnabled="true">
    <GuidedTourStep Title="My First Step" StepName="firstStep" TourStepSequence="1" 
        ElementSelector="[data-form-firstStep]">
        <span>This is my first step</span>
    </GuidedTourStep>
</GuidedTour>

Set the step target

<div data-form-firstStep>
    <span>My parent container is the first step target, see my parent wrapper's data attribute 
    corresponding to the ElementSelector of the step?</span>
</div>

Run tour via service

@code {
  [Inject]
  private ITourService TourService { get; set; }

  private async Task StartTour()
  {
    await TourService.StartTour("FormGuidedTour");
  }
}