PSC.Blazor.Components.Tours 1.0.10

dotnet add package PSC.Blazor.Components.Tours --version 1.0.10                
NuGet\Install-Package PSC.Blazor.Components.Tours -Version 1.0.10                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PSC.Blazor.Components.Tours" Version="1.0.10" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PSC.Blazor.Components.Tours --version 1.0.10                
#r "nuget: PSC.Blazor.Components.Tours, 1.0.10"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install PSC.Blazor.Components.Tours as a Cake Addin
#addin nuget:?package=PSC.Blazor.Components.Tours&version=1.0.10

// Install PSC.Blazor.Components.Tours as a Cake Tool
#tool nuget:?package=PSC.Blazor.Components.Tours&version=1.0.10                

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");
  }
}
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.10 4,247 6/14/2022
1.0.9 416 6/14/2022
1.0.8 419 6/14/2022
1.0.7 399 6/14/2022
1.0.6 385 6/14/2022
1.0.4 414 6/9/2022
1.0.3 410 6/9/2022
1.0.2 407 6/9/2022
1.0.1 427 6/9/2022

Full component for a Guided Tour for Blazor