Кодовете за потвърждение трябва да се въвеждат бързо. OtpInput показва по една клетка на знак, придвижва се напред при писане, връща се с Backspace и приема поставен код.
Защо помага
- Една клетка на знак
- Плавно писане и поставяне
- Познат вид на поле за код за потвърждение
Къде пасва
- Вход с две стъпки
- Потвърждение по имейл и телефон
- Кодове за доставка
Пример
<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;
}Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.
Включено в RayCraft Free. Работещи примери има в хранилище в GitHub (MIT); то съдържа примерен и демонстрационен код, не кода на библиотеката.