Stepper

Водете потребителите през последователност от стъпки с бутони Назад и Напред, с валидация на стъпка, ако желаете.

Защо помага

• Валидация на стъпка
• Назад и Напред
• Ясен напредък

Къде пасва

• Въвеждане на нови потребители
• Плащане
• Многостъпкови форми

Пример

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

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Включено в RayCraft Free. Работещи примери има в хранилище в GitHub (MIT); то съдържа примерен и демонстрационен код, не кода на библиотеката.

Всички контроли · Документация