React steps component.
npm install rc-steps
<Steps current={1}>
<Steps.Step title="first" />
<Steps.Step title="second" />
<Steps.Step title="third" />
</Steps>
https://react-component.github.io/steps/
name | type | default | description |
---|---|---|---|
type | string | default | diretypetion of Steps, enum: `default` or `navigation` |
direction | string | horizontal | direction of Steps, enum: `horizontal` or `vertical` |
current | number | 0 | index of current step |
showStepNumber | boolean | show the step no inside the step item | |
initial | number | 0 | index initial |
size | string | size of Steps, could be `small` | |
labelPlacement | string | placement of step title, could be `vertical` | |
status | string | wait | status of current Steps, could be `error` `process` `finish` `wait` |
icons | { finish: ReactNode, error: ReactNode } | specify the default finish icon and error icon | |
onChange | (current: number) => void | Trigger when Step changed |
name | type | default | description |
---|---|---|---|
title | ReactNode | title of step item | |
subTitle | ReactNode | subTitle of step item | |
description | ReactNode | description of step item | |
icon | ReactNode | set icon of step item | |
wrapCustomIcon | string | Wrap the custom icon inside the step item (Check custom icon example) | |
status | string | status of current Steps, could be `error` `process` `finish` `wait` | |
tailContent | ReactNode | content above tail | |
disabled | bool | false | disabled step when onChange exist |
npm install
npm start
rc-steps is released under the MIT license.