BulmaRazor

Steps步骤

移植于 https://octoshrimpy.github.io/bulma-o-steps/

默认情况下，步骤在移动设备上垂直显示，在更大尺寸时水平显示。

无论屏幕大小如何，都可以使用 IsHorizontal或 IsVertical 始终将步骤强制对齐。

可以使用Active属性设置当前激活步骤

应用了各种样式的例子

视图
代码

Shopping Cart
User Information
Payment
Confirmation

<Steps Active="index" IsNarrow IsMedium IsCentered HasContentCentered>
    <StepsSegment>
        <StepsMarker href="#">
            <Icon IconClass="fa fa-shopping-cart"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">Shopping Cart</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker href="#">
            <Icon IconClass="fa fa-user"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">User Information</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment HasGaps>
        <StepsMarker Color="Color.Danger">
            <Icon IconClass="fa fa-usd"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">Payment</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker IsHollow>
            <Icon IconClass="fa fa-check"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">Confirmation</p>
        </StepsContent>
    </StepsSegment>
</Steps>

<hr>

<Button @onclick="NextStep">下一步</Button>

@code{

    int index = 1;

    void NextStep()
    {
        if (index++ >= 3)
            index = 0;
    }

}

基础用法

可以使用Active属性设置当前激活步骤

视图
代码

<Steps Active="2">
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

颜色

每个标记可以具有不同的颜色。

视图
代码

1
White
2
Light
3
Dark
4
Black

1
Primary
2
Info
3
Success
4
Warning
5
Danger

<Columns>
    <Column>
        <Steps Active="2" HasContentCentered>
            <StepsSegment>
                <StepsMarker Color="Color.White">1</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">White</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Light">2</StepsMarker>
                <StepsContent >
                    <Subtitle Size="Size.Size4">Light</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Dark">3</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Dark</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Black">4</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Black</Subtitle>
                </StepsContent>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps Active="2" HasContentCentered>
            <StepsSegment>
                <StepsMarker Color="Color.Primary">1</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Primary</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Info">2</StepsMarker>
                <StepsContent >
                    <Subtitle Size="Size.Size4">Info</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Success">3</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Success</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Warning">4</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Warning</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker Color="Color.Danger">5</StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Danger</Subtitle>
                </StepsContent>
            </StepsSegment>
        </Steps>

    </Column>
</Columns>

<Steps Active="2" IsSmall>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

<Steps Active="2">
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

<Steps Active="2" IsMedium>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

<Steps Active="2" IsLarge>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

IsThin 属性可以将宽度设置为1px,标记也变小，因此您不能再在其中放置任何内容。

视图
代码

<Steps Active="2" IsThin>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

Marker内容

可以在Marker中显示信息，2-3个字符或者icon都可以适配

视图
代码

<Steps Active="2">
    <StepsSegment>
        <StepsMarker>1</StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>xyz</StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>-3-</StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>★</StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
            <Icon IconClass="fa fa-check"></Icon>
        </StepsMarker>
    </StepsSegment>
</Steps>

步骤内容

使用 StepsContent 可以在步骤中添加内容.

如果最后一步有内容，需要在 Steps 上使用 IsBalanced 属性来确保最后一步和其他步骤有相同的宽高.

视图
代码

Step1

This is the first step, which means you start here.
Step2

This is the second step. Once you complete the first step, you will end up here.
Step 3

This is the third step. This is halfway between the start and the end.
Step 4

The fourth step. Nearly there!
Step 5

And finally the last step. You have successfully completed all 5 steps.

<Steps Active="2" IsBalanced>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step1</Subtitle>
            <p>This is the first step, which means you start here.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step2</Subtitle>
            <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 3</Subtitle>
            <p>This is the third step. This is halfway between the start and the end.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 4</Subtitle>
            <p>The fourth step. Nearly there!</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 5</Subtitle>
            <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </StepsContent>
    </StepsSegment>
</Steps>

使用 HasContentCentered 属性可以是内容居中，如果使用了 HasContentCentered 就不需要使用 IsBalanced 了

视图
代码

Step1

This is the first step, which means you start here.
Step2

This is the second step. Once you complete the first step, you will end up here.
Step 3

This is the third step. This is halfway between the start and the end.
Step 4

The fourth step. Nearly there!
Step 5

And finally the last step. You have successfully completed all 5 steps.

<Steps Active="2" HasContentCentered>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step1</Subtitle>
            <p>This is the first step, which means you start here.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step2</Subtitle>
            <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 3</Subtitle>
            <p>This is the third step. This is halfway between the start and the end.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 4</Subtitle>
            <p>The fourth step. Nearly there!</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 5</Subtitle>
            <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </StepsContent>
    </StepsSegment>
</Steps>

在 StepsContent 上应用 IsDividerContent 属性，可以使内容在分隔条居中

如果最后一步没有内容，需要移除 IsBalanced 来确保最后一步充满右侧边缘

视图
代码

Step1
Step2
Step 3
Step 4

<Steps Active="2">
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step1</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step2</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step 3</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step 4</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
    </StepsSegment>
</Steps>

在 Steps 上应用 HasContentAbove 属性，可以使内容在Marker之上

如果最后一步没有内容，需要移除 IsBalanced 来确保最后一步充满右侧边缘

视图
代码

Step1

This is the first step, which means you start here.
Step2

This is the second step. Once you complete the first step, you will end up here.
Step 3

This is the third step. This is halfway between the start and the end.
Step 4

The fourth step. Nearly there!
Step 5

And finally the last step. You have successfully completed all 5 steps.

<Steps Active="2" IsBalanced HasContentAbove>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step1</Subtitle>
            <p>This is the first step, which means you start here.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step2</Subtitle>
            <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 3</Subtitle>
            <p>This is the third step. This is halfway between the start and the end.</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 4</Subtitle>
            <p>The fourth step. Nearly there!</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent>
            <Subtitle Size="Size.Size4">Step 5</Subtitle>
            <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </StepsContent>
    </StepsSegment>
</Steps>

HasContentAbove 可以和 IsDividerContent 一起使用

视图
代码

Step1
Step2
Step 3
Step 4

<Steps Active="2" HasContentAbove>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step1</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step2</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step 3</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
        <StepsContent IsDividerContent>
            <Subtitle Size="Size.Size4">Step 4</Subtitle>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker></StepsMarker>
    </StepsSegment>
</Steps>

附加数据

使用 StepsExtraData 可以在两个步骤直接显示附加数据，可以和 HasContentAbove 一起使用

默认情况下附加数据居中并自动换行，可以使用 HasOverflowLeft 或者 HasOverflowRight 允许多余的数据溢出

视图
代码

Step1
Step2

Hello, there.
Step 3

Step1
Step2

Hello, there. bala bala bala
Step 3

<Columns>
    <Column>
        <Steps Active="1" HasContentCentered>
            <StepsSegment>
                <StepsMarker></StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Step1</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker></StepsMarker>
                <StepsContent >
                    <Subtitle Size="Size.Size4">Step2</Subtitle>
                </StepsContent>
                <StepsExtraData>Hello, there.</StepsExtraData>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
                <StepsContent >
                    <Subtitle Size="Size.Size4">Step 3</Subtitle>
                </StepsContent>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps Active="1" HasContentCentered HasContentAbove>
            <StepsSegment>
                <StepsMarker></StepsMarker>
                <StepsContent>
                    <Subtitle Size="Size.Size4">Step1</Subtitle>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker></StepsMarker>
                <StepsContent >
                    <Subtitle Size="Size.Size4">Step2</Subtitle>
                </StepsContent>
                <StepsExtraData HasOverflowRight>Hello, there. bala bala bala </StepsExtraData>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
                <StepsContent >
                    <Subtitle Size="Size.Size4">Step 3</Subtitle>
                </StepsContent>
            </StepsSegment>
        </Steps>

    </Column>
</Columns>

狭窄样式

默认情况下，Steps 组件将占用整个宽度。添加 IsNarrow 属性仅占用所需的空间。

您可以将其与 IsCentered 或 IsRight 结合使用以更改对齐方式。

视图
代码

<Steps Active="1" IsNarrow>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>
<Steps Active="1" IsNarrow IsCentered>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>
<Steps Active="1" IsNarrow IsRight>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker>
        </StepsMarker>
    </StepsSegment>
</Steps>

短样式

默认情况下，带有 IsVertical 属性的 Steps 组件将占据整个高度。添加 IsShort 属性仅占用所需的空间。

您可以将其与 IsCentered 或 IsBottom 结合使用以更改对齐方式。

视图
代码

<Columns>
    <Column>
        <Steps style="height: 450px" Active="1" IsVertical IsShort>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps  style="height: 450px" Active="1" IsVertical IsShort IsCentered>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps  style="height: 450px" Active="1" IsVertical IsShort IsBottom>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
</Columns>

标记样式

可以使用 IsHollow 设置标记的样式。通过在根步骤元素或每个标记上分别定义它，可以将其应用于所有步骤。

视图
代码

<Columns>
    <Column>
        <Steps Active="1" IsHollow>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps Active="1">
            <StepsSegment>
                <StepsMarker IsHollow>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker IsHollow>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
</Columns>

分割线样式

可以使用 IsDashed,HasGap 来设置分隔符的样式。

通过在根步骤元素或每个步骤上分别定义它们，它们可以应用于所有步骤。

视图
代码

Next step unreachable

<Columns>
    <Column>
        <Steps Active="1" IsDashed>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps Active="1">
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment IsDashed>
                <StepsMarker>
                </StepsMarker>
                <StepsContent IsDividerContent>
                    <p class="heading">Next step unreachable</p>
                </StepsContent>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
</Columns>

<Columns>
    <Column>
        <Steps Active="1" HasGaps>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
    <Column>
        <Steps Active="1">
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment HasGaps>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
            <StepsSegment>
                <StepsMarker>
                </StepsMarker>
            </StepsSegment>
        </Steps>
    </Column>
</Columns>

文档