Step

Use the Step component to represent a series of steps or processes.

Example

With Step Titles

First Step

This is the content of the first step

Second Step

This is the content of the second step

Third Step

This is the content of the third step

Code:

<Steps>
    <Step title="First Step">
        This is the content of the first step
    </Step>
    <Step title="Second Step">
        This is the content of the second step
    </Step>
    <Step title="Third Step">
        This is the content of the third step
    </Step>
</Steps>

You can refer to the example to add any number of steps. The code within the steps follows Markdown syntax.

Without Step Titles

This is the content of the first step

This is the content of the second step

This is the content of the third step

Code:

<Steps>
    <Step title="">
        This is the content of the first step
    </Step>
    <Step title="">
        This is the content of the second step
    </Step>
    <Step title="">
        This is the content of the third step
    </Step>
</Steps>

You can refer to the example to add any number of steps. The code within the steps follows Markdown syntax.

Custom Icons

The default icons are Arabic numerals. Icons can be set according to the requirements.

First Step

This is the content of the first step

Second Step

This is the content of the second step

Third Step

This is the content of the third step

Code:

<Steps>
    <Step title="First Step" icon="remix-progress-2-fill">
        This is the content of the first step
    </Step>
    <Step title="Second Step" icon="remix-progress-4-fill">
        This is the content of the second step
    </Step>
    <Step title="Third Step" icon="remix-progress-6-fill">
        This is the content of the third step
    </Step>
</Steps>

Parameter Description

Step

title

string

Title

required

Define step title

icon

string

Icon

optional

Define icon. For methods, refer to icon

Example#

With Step Titles#

Without Step Titles#

Custom Icons#

Parameter Description#

Example

With Step Titles

Without Step Titles

Custom Icons

Parameter Description