Steps

Example

Simple step component with image and content.

<>
	<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.

<>
	<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 img="https://erxes.io/static/images/logo/logo_dark.svg">children</Step>
</>

Title

Add title by title prop.


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

No button

Hide the "next" button by noButton prop.


<>
	<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
noButtonfunctionDefine click handler function

Was this page helpful?