PSC.Blazor.Components.Tours 1.0.9

Guided Tours Blazor Component

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

Installation

Download and install the package from 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;

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)

In your index.html add the following code to add the generic style in the HEAD section of the page

<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>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
</div>

Run tour via service

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

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