Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Steps 步骤条

引导用户按照流程完成任务的导航条

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步

Steps 组件支持通过设置 Items 属性或者直接内嵌 Step 组件两种方式进行 UI 呈现

基础用法

简单的步骤条,通过直接绑定数据源 Items 即可

Demo
1
步骤一
2
步骤二
3
步骤三

基础用法

简单的步骤条,组件内部直接使用 Step 组件设置步骤

Demo
步骤一
2
步骤二
步骤三
步骤四
5
步骤五

有描述的步骤条

每个步骤有其对应的步骤状态描述

Demo
步骤一
这是一段很长很长很长的描述性文字
3
步骤二
这是一段很长很长很长的描述性文字
4
步骤三
这是一段很长很长很长的描述性文字
5
步骤四
结束语

居中的步骤条

标题和描述都将居中

Demo
步骤一
这是一段很长很长很长的描述性文字
步骤二
这是一段很长很长很长的描述性文字
3
步骤三
这是一段很长很长很长的描述性文字
4
步骤四
结束语

带图标的步骤条

步骤条内可以启用各种自定义的图标

Demo
步骤一
这是一段很长很长很长的描述性文字
步骤二
这是一段很长很长很长的描述性文字
步骤三
这是一段很长很长很长的描述性文字
步骤四
结束语

Attributes

Loading...

StepItem 属性

Loading...

事件 Events

Loading...
@page "/stepss"

<h3>Steps 步骤条</h3>

<h4>引导用户按照流程完成任务的导航条</h4>

<p>引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步</p>

<p><code>Steps</code> 组件支持通过设置 <code>Items</code> 属性或者直接内嵌 <code>Step</code> 组件两种方式进行 UI 呈现</p>

<Block Title="基础用法" Introduction="简单的步骤条,通过直接绑定数据源 <code>Items</code> 即可">
    <Steps Items="@Items" OnStatusChanged="@OnStatusChanged" />
    <div class="mt-1">
        <Button OnClick="@NextStep" IsOutline="true">下一步</Button>
        <Button OnClick="@ResetStep" IsOutline="true">重 置</Button>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="基础用法" Introduction="简单的步骤条,组件内部直接使用 <code>Step</code> 组件设置步骤">
    <Steps>
        <Step Title="步骤一" Space="25%" Status="StepStatus.Success"></Step>
        <Step Title="步骤二" Space="25%" Status="StepStatus.Process" StepIndex="1"></Step>
        <Step Title="步骤三" Space="25%" Status="StepStatus.Error" StepIndex="2"></Step>
        <Step Title="步骤四" Space="25%" Status="StepStatus.Finish" StepIndex="3"></Step>
        <Step Title="步骤五" Space="25%" StepIndex="4" IsLast="true"></Step>
    </Steps>
</Block>

<Block Title="有描述的步骤条" Introduction="每个步骤有其对应的步骤状态描述">
    <Steps>
        <Step Title="步骤一" Space="33.33%" Status="StepStatus.Finish" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" StepIndex="3" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" StepIndex="4" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<Block Title="居中的步骤条" Introduction="标题和描述都将居中">
    <Steps IsCenter="true">
        <Step Title="步骤一" Space="33.33%" Status="StepStatus.Finish" StepIndex="0" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" Status="StepStatus.Success" StepIndex="1" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" StepIndex="3" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<Block Title="带图标的步骤条" Introduction="步骤条内可以启用各种自定义的图标">
    <Steps IsCenter="true">
        <Step Title="步骤一" Space="33.33%" IsIcon="true" Icon="fa fa-user" Status="StepStatus.Success" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" IsIcon="true" Icon="fa fa-user-plus" Status="StepStatus.Process" StepIndex="1" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" IsIcon="true" Icon="fa fa-users" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" IsIcon="true" Icon="fa fa-user-secret" StepIndex="3" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="StepItem 属性" 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/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Linq;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Stepss
    {
        private IEnumerable<StepItem> Items { get; set; } = new StepItem[3]
        {
            new StepItem() { Title = "步骤一" },
            new StepItem() { Title = "步骤二" },
            new StepItem() { Title = "步骤三" }
        };

        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>
        private Logger? Trace { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="status"></param>
        private void OnStatusChanged(StepStatus status)
        {
            Trace?.Log($"Steps Status: {status}");
        }

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "Items",
                    Description = "设置步骤数据集合",
                    Type = "IEnumerable<StepItem>",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "IsVertical",
                    Description = "显示方向",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "IsCenter",
                    Description = "进行居中对齐",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "Status",
                    Description = "设置当前步骤的状态",
                    Type = "StepStatus",
                    ValueList = "Wait|Process|Finish|Error|Success",
                    DefaultValue = "Wait"
                }
            };
        }

        private IEnumerable<AttributeItem> GetStepItemAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "IsCenter",
                    Description = "进行居中对齐",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "IsIcon",
                    Description = "进行使用图标进行步骤显示",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "IsLast",
                    Description = "是否为最后一个步骤",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "StepIndex",
                    Description = "步骤顺序号",
                    Type = "int",
                    ValueList = " — ",
                    DefaultValue = "0"
                },
                new AttributeItem() {
                    Name = "Space",
                    Description = "间距不填写将自适应间距支持百分比",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = "—"
                },
                new AttributeItem() {
                    Name = "Title",
                    Description = "步骤显示文字",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = "—"
                },
                new AttributeItem() {
                    Name = "Icon",
                    Description = "步骤显示图标",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "Description",
                    Description = "描述信息",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "Status",
                    Description = "设置当前步骤的状态",
                    Type = "StepStatus",
                    ValueList = "Wait|Process|Finish|Error|Success",
                    DefaultValue = "Wait"
                }
            };
        }

        private IEnumerable<EventItem> GetEvents()
        {
            return new List<EventItem>()
            {
                new EventItem()
                {
                    Name = "OnStatusChanged",
                    Description="组件状态改变时回调委托",
                    Type ="Action<StepStatus>"
                }
            };
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload