En trinn-for-trinn-innføring som utheve sideelementer valgt med en CSS-velger.
Hvorfor det hjelper
- Utheve ekte elementer
- Trinn for trinn
- Hopper over manglende mål
Hvor det passer
- Nye brukere
- Funksjonskunngjøringer
- Innføring
Eksempel
<Stack Align="center">
<Button id="tour-primary" StartIcon="IconName.Save">Save</Button>
<Button id="tour-secondary" Variant="Variant.Outlined">Cancel</Button>
<TextField id="tour-field" Label="Name" @bind-Value="_name" />
</Stack>
<Button Variant="Variant.Outlined" OnClick="@(() => _open = true)">Start tour</Button>
<Tour Steps="_steps" @bind-Open="_open" @bind-ActiveIndex="_index" />
@code {
private bool _open;
private int _index;
private string? _name;
private readonly TourStep[] _steps =
[
new("#tour-field", "Enter a name", "Start by typing a name for the item."),
new("#tour-primary", "Save your work", "This button stores the item."),
new("#tour-secondary", "Changed your mind?", "Cancel discards the changes."),
new("#does-not-exist", "Centered step", "When no element matches, the step is shown in the middle of the screen.")
];
}Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.