Führen Sie Benutzer mit Zurück- und Weiter-Schaltflächen durch eine Folge von Schritten, auf Wunsch mit Validierung pro Schritt.
Warum es hilft
- Validierung pro Schritt
- Zurück und Weiter
- Klarer Fortschritt
Wo es passt
- Onboarding
- Kasse
- Mehrstufige Formulare
Beispiel
<Stepper @bind-ActiveIndex="_step" OnFinish="@(() => _done = true)">
<StepperStep Title="Account"><TextField @bind-Value="_name" Label="Name" /></StepperStep>
<StepperStep Title="Plan"><Select @bind-Value="_plan" Items="_plans" Label="Plan" /></StepperStep>
<StepperStep Title="Confirm">Ready to create the account for @_name on the @_plan plan.</StepperStep>
</Stepper>
@if (_done)
{
<Alert Severity="Severity.Success">Finished!</Alert>
}
@code {
private int _step;
private bool _done;
private string? _name;
private string _plan = "Free";
private readonly string[] _plans = ["Free", "Team", "Enterprise"];
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.