Verifieringskoder ska vara snabba att skriva in. OtpInput visar en ruta per tecken, går vidare medan du skriver, backar med Backsteg och accepterar en inklistrad kod.
Varför det hjälper
- En ruta per tecken
- Smidig inmatning och inklistring
- Välbekant utseende för verifieringskod
Var det passar
- Tvåstegsinloggning
- Bekräftelse via e-post och telefon
- Leveranskoder
Exempel
<OtpInput @bind-Value="_code" Label="Verification code" Length="6" Completed="@(code => _done = code)" />
<OtpInput Label="PIN (hidden)" Length="4" Mask="true" />
<span>Code: @(_code ?? "") @(_done is null ? "" : "(complete)")</span>
@code {
private string? _code;
private string? _done;
}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.