Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Steps

A navigation bar that guides the user through the process

Step-by-step navigation bar that guides the user through the process, setting steps of no less than 2 steps based on the actual scenario

Steps component supports UI rendering by setting the Items property or by embedding the Step component directly

Basic usage

Simple step bar, by directly binding the data source Items

Demo

Step 1

Step 2

Step 3

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Stepss> Localizer

<Steps Items="@Items" OnStatusChanged="@OnStatusChanged" />
<div class="mt-1">
    <Button OnClick="@NextStep" IsOutline="true">@Localizer["StepssNormalButton1Text"]</Button>
    <Button OnClick="@ResetStep" IsOutline="true">@Localizer["StepssNormalButton2Text"]</Button>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private IEnumerable<StepItem> Items { get; set; } = new StepItem[3];

    protected override void OnInitialized()
    {
        Items = new StepItem[3]
        {
            new StepItem() { Title = Localizer["StepItemI1Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["StepItemI1TextC"]); builder.CloseElement(); } },
            new StepItem() { Title = Localizer["StepItemI2Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["StepItemI2TextC"]); builder.CloseElement(); } },
            new StepItem() { Title = Localizer["StepItemI3Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["StepItemI3TextC"]); builder.CloseElement(); } }
        };
    }

    private void NextStep()
    {
        var item = Items.FirstOrDefault(i => i.Status == StepStatus.Process);
        if (item != null)
        {
            item.Status = StepStatus.Success;
            var index = Items.ToList().IndexOf(item) + 1;
            if (index < Items.Count())
            {
                Items.ElementAt(index).Status = StepStatus.Process;
            }
        }
        else
        {
            ResetStep();
            Items.ElementAt(0).Status = StepStatus.Process;
        }
    }

    private void ResetStep()
    {
        Items.ToList().ForEach(i =>
        {
            i.Status = StepStatus.Wait;
        });
    }

    private Task OnStatusChanged(StepStatus status)
    {
        Trace.Log($"Steps Status: {status}");
        return Task.CompletedTask;
    }
}

Basic usage

A simple step bar that uses the Step component setup step directly inside the component

Demo

Step 1

Step 2

Step 3

Step 4

Step 5

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Stepss> Localizer

<Steps>
    <Step Title="@Localizer["Step1Title"]" Space="25%" Status="StepStatus.Success"></Step>
    <Step Title="@Localizer["Step2Title"]" Space="25%" Status="StepStatus.Process" StepIndex="1"></Step>
    <Step Title="@Localizer["Step3Title"]" Space="25%" Status="StepStatus.Error" StepIndex="2"></Step>
    <Step Title="@Localizer["Step4Title"]" Space="25%" Status="StepStatus.Finish" StepIndex="3"></Step>
    <Step Title="@Localizer["Step5Title"]" Space="25%" StepIndex="4" IsLast="true"></Step>
</Steps>

There is a description of the step bar

Each step described has its own description bar of step status

Demo

Step 1

This is a long descriptive text

Step 2

This is a long descriptive text

Step 3

This is a long descriptive text

Step 4

Conclusion

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Stepss> Localizer

<Steps>
    <Step Title="@Localizer["Step1Title"]" Space="33.33%" Status="StepStatus.Finish" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step2Title"]" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step3Title"]" Space="33.33%" StepIndex="3" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step4Title"]" Space="33.33%" StepIndex="4" IsLast="true" Description="@Localizer["StepDesc2"]"></Step>
</Steps>

Center the step bar

Both the title and description will be centered

Demo

Step 1

This is a long descriptive text

Step 2

This is a long descriptive text

Step 3

This is a long descriptive text

Step 4

Conclusion

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Stepss> Localizer

<Steps IsCenter="true">
    <Step Title="@Localizer["Step1Title"]" Space="33.33%" Status="StepStatus.Finish" StepIndex="0" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step2Title"]" Space="33.33%" Status="StepStatus.Success" StepIndex="1" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step3Title"]" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step4Title"]" Space="33.33%" StepIndex="3" IsLast="true" Description="@Localizer["StepDesc2"]"></Step>
</Steps>

Step bar with icon

Various custom icons can be enabled within the step bar

Demo

Step 1

This is a long descriptive text

Step 2

This is a long descriptive text

Step 3

This is a long descriptive text

Step 4

Conclusion

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Stepss> Localizer

<Steps IsCenter="true">
    <Step Title="@Localizer["Step1Title"]" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user" Status="StepStatus.Success" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step2Title"]" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user-plus" Status="StepStatus.Process" StepIndex="1" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step3Title"]" Space="33.33%" IsIcon="true" Icon="fa-solid fa-users" StepIndex="2" Description="@Localizer["StepDesc1"]"></Step>
    <Step Title="@Localizer["Step4Title"]" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user-secret" StepIndex="3" IsLast="true" Description="@Localizer["StepDesc2"]"></Step>
</Steps>

Attributes

StepItem Atributes

Event

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Steps

A navigation bar that guides the user through the process

Demo

Demo

Demo

Demo

Demo

Attributes

StepItem Atributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01