steps ui component for react
npm install @rc-component/steps---
React steps component.
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![npm download][download-image]][download-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[npm-image]: http://img.shields.io/npm/v/@rc-component/steps.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/steps
[travis-image]: https://img.shields.io/travis/react-component/steps.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/steps
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/steps/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/steps/branch/master
[download-image]: https://img.shields.io/npm/dm/@rc-component/steps.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/steps
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/steps
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/steps
``bash`
npm install @rc-component/steps
`jsx | pure`
https://steps.vercel.app/
| 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 | |
| titlePlacement | 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 |
`bash``
npm install
npm start
@rc-component/steps is released under the MIT license.