Steps

Example

Simple step component with image and content.

children1

children2

children3

<>

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

children1

children2

children3

<>

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

children

<>

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

</>

Title

Add title by title prop.

Title

children

<>

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

</>

No button

Hide the "next" button by noButton prop.

children1

children2

children3

<>

<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

Name	Type	Default	Description
children*	any		Contain step components
active	number		Change the step that expands on start
maxStep	number	6	Limit the number of steps (always 6)

Step

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

* required prop

Name	Type	Default	Description
stepNumber	number		Define step number
active	number		Define which step that expands on start
img	string		Shows image
title	string		Shows title
children	React.ReactNode		Shows content of step
next	function		Define click function of next button
noButton	boolen		Hide the "Next" button
onClick	function		Define click handler function