Hoppa till innehållet
NAVIGERING · FREE

Stepper

Led användare genom en process ett steg i taget.

Led användare genom en följd av steg med knapparna Tillbaka och Nästa, med validering per steg om du vill.

Varför det hjälper

  • Validering per steg
  • Tillbaka och Nästa
  • Tydligt förlopp

Var det passar

  • Introduktion
  • Kassan
  • Formulär i flera steg
Kontrollen Stepper på en RayCraft-sida

Exempel

<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"];
}

Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.

Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.

Alla kontroller ยท Dokumentation