
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
Simple step bar, by directly binding the data source Items
Demo
A simple step bar that uses the Step
component setup step directly inside the component
Demo
Each step described has its own description bar of step status
Demo
Both the title and description will be centered
Demo
Various custom icons can be enabled within the step bar
Demo
Attributes
StepItem Atributes
Event
@page "/stepss"
@inject IStringLocalizer<Stepss> Localizer
<h3>Steps</h3>
<h4>A navigation bar that guides the user through the process</h4>
<p>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</p>
<p><code>Steps</code> component supports UI rendering by setting the <code>Items</code> property or by embedding the <code>Step</code> component directly</p>
<DemoBlock Title="Basic usage" Introduction="Simple step bar, by directly binding the data source <code>Items</code>" Name="Normal">
<Steps Items="@Items" OnStatusChanged="@OnStatusChanged" />
<div class="mt-1">
<Button OnClick="@NextStep" IsOutline="true">Next</Button>
<Button OnClick="@ResetStep" IsOutline="true">Reset</Button>
</div>
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Basic usage" Introduction="A simple step bar that uses the <code>Step</code> component setup step directly inside the component" Name="Step">
<Steps>
<Step Title="Step 1" Space="25%" Status="StepStatus.Success"></Step>
<Step Title="Step 2" Space="25%" Status="StepStatus.Process" StepIndex="1"></Step>
<Step Title="Step 3" Space="25%" Status="StepStatus.Error" StepIndex="2"></Step>
<Step Title="Step 4" Space="25%" Status="StepStatus.Finish" StepIndex="3"></Step>
<Step Title="Step 5" Space="25%" StepIndex="4" IsLast="true"></Step>
</Steps>
</DemoBlock>
<DemoBlock Title="There is a description of the step bar" Introduction="Each step described has its own description bar of step status" Name="Desc">
<Steps>
<Step Title="Step 1" Space="33.33%" Status="StepStatus.Finish" Description="This is a long descriptive text"></Step>
<Step Title="Step 2" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="This is a long descriptive text"></Step>
<Step Title="Step 3" Space="33.33%" StepIndex="3" Description="This is a long descriptive text"></Step>
<Step Title="Step 4" Space="33.33%" StepIndex="4" IsLast="true" Description="Conclusion"></Step>
</Steps>
</DemoBlock>
<DemoBlock Title="Center the step bar" Introduction="Both the title and description will be centered" Name="Middle">
<Steps IsCenter="true">
<Step Title="Step 1" Space="33.33%" Status="StepStatus.Finish" StepIndex="0" Description="This is a long descriptive text"></Step>
<Step Title="Step 2" Space="33.33%" Status="StepStatus.Success" StepIndex="1" Description="This is a long descriptive text"></Step>
<Step Title="Step 3" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="This is a long descriptive text"></Step>
<Step Title="Step 4" Space="33.33%" StepIndex="3" IsLast="true" Description="Conclusion"></Step>
</Steps>
</DemoBlock>
<DemoBlock Title="Step bar with icon" Introduction="Various custom icons can be enabled within the step bar" Name="TitleCenter">
<Steps IsCenter="true">
<Step Title="Step 1" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user" Status="StepStatus.Success" Description="This is a long descriptive text"></Step>
<Step Title="Step 2" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user-plus" Status="StepStatus.Process" StepIndex="1" Description="This is a long descriptive text"></Step>
<Step Title="Step 3" Space="33.33%" IsIcon="true" Icon="fa-solid fa-users" StepIndex="2" Description="This is a long descriptive text"></Step>
<Step Title="Step 4" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user-secret" StepIndex="3" IsLast="true" Description="Conclusion"></Step>
</Steps>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<AttributeTable Title="StepItem Atributes" Items="@GetStepItemAttributes()" />
<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Stepss
{
private IEnumerable<StepItem> Items { get; set; } = new StepItem[3];
/// <summary>
/// OnInitialised method
/// </summary>
protected override void OnInitialized()
{
Items = new StepItem[3]
{
new StepItem() { Title = Localizer["I1Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["I1TextC"]); builder.CloseElement(); } },
new StepItem() { Title = Localizer["I2Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["I2TextC"]); builder.CloseElement(); } },
new StepItem() { Title = Localizer["I3Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["I3TextC"]); 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;
});
}
/// <summary>
///
/// </summary>
[NotNull]
private BlockLogger? Trace { get; set; }
/// <summary>
///
/// </summary>
/// <param name="status"></param>
private Task OnStatusChanged(StepStatus status)
{
Trace.Log($"Steps Status: {status}");
return Task.CompletedTask;
}
/// <summary>
///
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = "Items",
Description = Localizer["Desc1"],
Type = "IEnumerable<StepItem>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "IsVertical",
Description = Localizer["Desc2"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsCenter",
Description = Localizer["Desc3"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Status",
Description = Localizer["Desc4"],
Type = "StepStatus",
ValueList = "Wait|Process|Finish|Error|Success",
DefaultValue = "Wait"
}
};
private IEnumerable<AttributeItem> GetStepItemAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = "IsCenter",
Description = Localizer["Att1"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsIcon",
Description = Localizer["Att2"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsLast",
Description = Localizer["Att3"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "StepIndex",
Description = Localizer["Att4"],
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem() {
Name = "Space",
Description = Localizer["Att5"],
Type = "string",
ValueList = " — ",
DefaultValue = "—"
},
new AttributeItem() {
Name = "Title",
Description = Localizer["Att6"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Icon",
Description = Localizer["Att7"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Description",
Description = Localizer["Att8"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Status",
Description = Localizer["Att9"],
Type = "StepStatus",
ValueList = "Wait|Process|Finish|Error|Success",
DefaultValue = "Wait"
},
new AttributeItem() {
Name = "Template",
Description = Localizer["Att10"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
}
};
private IEnumerable<EventItem> GetEvents() => new List<EventItem>()
{
new EventItem()
{
Name = "OnStatusChanged",
Description = Localizer["Event1"],
Type ="Func<StepStatus, Task>"
}
};
}