Uma introdução passo a passo que destaca elementos da página escolhidos por um seletor CSS.
Por que ajuda
- Destaca elementos reais
- Passo a passo
- Pula alvos ausentes
Onde se encaixa
- Novos usuários
- Anúncios de recursos
- Integração
Exemplo
<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.")
];
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.