Skip to main content

Steps

Example#

Simple step component with image and content.

step-icon
children1
step-icon
step-icon
children2
step-icon
step-icon
children3
step-icon
<>
<Steps >
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children1</Step>
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children2</Step>
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children3</Step>
</Steps>
</>

Active#

Change the step that expands on start with active prop.

step-icon
children1
step-icon
step-icon
children2
step-icon
step-icon
children3
step-icon
<>
<Steps active={2}>
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children1</Step>
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children2</Step>
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children3</Step>
</Steps>
</>

Step#

Image#

Add image by img prop.

step-icon
children
step-icon
<>
<Step img="https://erxes.io/static/images/logo/logo_dark.svg">children</Step>
</>

Title#

Add title by title prop.

step-icon
Title
children
step-icon
<>
<Step title="Title" img="https://erxes.io/static/images/logo/logo_dark.svg">children</Step>
</>

No button#

Hide the "next" button by noButton prop.

step-icon
children1
step-icon
step-icon
children2
step-icon
step-icon
children3
step-icon
<>
<Steps>
<Step noButton img="https://erxes.io/static/images/logo/logo_dark.svg">children1</Step>
<Step noButton img="https://erxes.io/static/images/logo/logo_dark.svg">children2</Step>
<Step noButton img="https://erxes.io/static/images/logo/logo_dark.svg">children3</Step>
</Steps>
</>

Api#

Steps#

import Steps from "erxes-ui/lib/components/Steps";

* required prop

NameTypeDefaultDescription
children*anyContain step components
activenumberChange the step that expands on start
maxStepnumber6Limit the number of steps (always 6)

Step#

import Step from "erxes-ui/lib/components/Step";

* required prop

NameTypeDefaultDescription
stepNumbernumberDefine step number
activenumberDefine which step that expands on start
imgstringShows image
titlestringShows title
childrenReact.ReactNodeShows content of step
nextfunctionDefine click function of next button
noButtonboolenHide the "Next" button
onClickfunctionDefine click handler function
Last updated on by enkhzule