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, could be `default` `navigation` `inline` |
| direction | string | horizontal | direction of Steps, enum: `horizontal` or `vertical` |
| current | number | 0 | index of current step |
| 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 | |
| itemRender | (item: StepProps, stepItem: React.ReactNode) => React.ReactNode | custom step item renderer | |
| 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 | |
| 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 |
| render | (stepItem: React.ReactNode) => React.ReactNode | custom step item renderer |
npm install
npm start
rc-steps is released under the MIT license.