Les codes de vérification doivent se saisir vite. OtpInput affiche une case par caractère, avance pendant la frappe, recule avec Retour arrière et accepte un code collé.
Pourquoi c’est utile
- Une case par caractère
- Saisie et collage fluides
- Aspect familier de code de vérification
Où il trouve sa place
- Connexion en deux étapes
- Confirmation par e-mail et téléphone
- Codes de livraison
Exemple
<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;
}Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.