ant-design-blazor/components/steps/Step.razor

@namespace AntDesign
@inherits AntDomComponentBase


<div class="@ClassMapper.Class" style="@Style" id="@Id">
    <div class="ant-steps-item-container" @onclick="@HandleClick" tabindex="@GetTabIndex()" @attributes="@_containerAttributes">
        @if (!Last)
        {
            <div class="ant-steps-item-tail"></div>
        }
        <div class="ant-steps-item-icon">
            @if (!ShowProcessDot)
            {
                @if (Percent != null && Parent.Current == Index)
                {
                    <div class="ant-steps-progress-icon">
                        <Progress Percent="@((double) Percent)"
                                  Width=@(Size == "small" ? 32 : 40)
                                  Type=ProgressType.Circle
                                  StrokeWidth="4"
                                  Format=@((p) => "") />
                        <span class="ant-steps-icon">

                            @if (string.IsNullOrEmpty(Icon))
                            {
                                if (Status == "finish")
                                {
                                    <Icon type="check"></Icon>
                                }
                                else if (Status == "error")
                                {
                                    <Icon type="close"></Icon>
                                }
                                else if (Status == "process" || Status == "wait")
                                {
                                    @(Index + 1)
                                }
                            }
                            else
                            {
                                if (Status == "error")
                                {
                                    <Icon type="close"></Icon>
                                }
                                else
                                {
                                    <Icon type="@Icon"></Icon>
                                }
                            }
                        </span>
                    </div>
                }
                else
                {
                    <span class="ant-steps-icon">

                        @if (string.IsNullOrEmpty(Icon))
                        {
                            if (Status == "finish")
                            {
                                <Icon type="check"></Icon>
                            }
                            else if (Status == "error")
                            {
                                <Icon type="close"></Icon>
                            }
                            else if (Status == "process" || Status == "wait")
                            {
                                @(Index + 1)
                            }
                        }
                        else
                        {
                            if (Status == "error")
                            {
                                <Icon type="close"></Icon>
                            }
                            else
                            {
                                <Icon type="@Icon"></Icon>
                            }
                        }
                    </span>
                }
            }
            else
            {
                <span class="ant-steps-icon">
                    <span class="ant-steps-icon-dot"></span>
                </span>
            }
        </div>
        <div class="ant-steps-item-content">
            <div class="ant-steps-item-title">
                @if (TitleTemplate != null)@TitleTemplate else @Title

                @if (SubtitleTemplate != null || Subtitle != null)
                {
                    <div class="ant-steps-item-subtitle">
                        @if (SubtitleTemplate != null)@SubtitleTemplate else @Subtitle
                    </div>
                }
            </div>
            @if (DescriptionTemplate != null || Description != null)
            {
                <div class="ant-steps-item-description">
                    @if (DescriptionTemplate != null)@DescriptionTemplate else @Description
                </div>
            }
        </div>
    </div>
</div>