One tour, two ways to write it
The whole tour, in markup
This is the tour running above. Steps point at elements through
data-bonboarding-anchor attributes, so they survive re-renders and work with
elements that do not exist yet.
As components
Declared next to the page it tours, and started from a button or on first visit.
<BonboardingTour @ref="tour" Id="welcome">
<BonboardingStep Anchor="new-project"
Title="Create a project"
Description="Everything starts here." />
<BonboardingStep Anchor="search"
Title="Find anything"
Placement="BonboardingPlacement.Bottom"
Description="Search across every project you can see." />
</BonboardingTour>
@* Mark the targets, anywhere in your markup: *@
<button data-bonboarding-anchor="new-project">New project</button>
Or as data
The components build a BonboardingTourDefinition. Constructing one directly
is equally supported - it is what you want when tours come from configuration.
var tour = new BonboardingTourDefinition
{
Id = "welcome",
Steps =
{
new BonboardingStepDefinition
{
Id = "create",
Target = BonboardingStepTarget.Anchor("new-project"),
Title = "Create a project",
Description = "Everything starts here.",
},
new BonboardingStepDefinition
{
Id = "search",
Target = "#search-box", // a CSS selector converts implicitly
Placement = BonboardingPlacement.Bottom,
Title = "Find anything",
},
},
};
await BonboardingService.StartOnceAsync(tour); // skipped if the user already finished it