https://github.com/react-component/steps

React Steps
https://github.com/react-component/steps

Last synced: 13 days ago
JSON representation

React Steps

• Host: GitHub
• URL: https://github.com/react-component/steps
• Owner: react-component
• License: mit
• Created: 2015-06-25T02:34:10.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-08-22T02:36:34.000Z (3 months ago)
• Last Synced: 2024-10-19T21:25:49.423Z (24 days ago)
• Language: TypeScript
• Homepage: https://steps.vercel.app/
• Size: 8.63 MB
• Stars: 333
• Watchers: 25
• Forks: 112
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# rc-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-steps.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rc-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-steps.svg?style=flat-square

[download-url]: https://npmjs.org/package/rc-steps

[bundlephobia-url]: https://bundlephobia.com/result?p=rc-steps

[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-steps

## Usage

```bash

npm install rc-steps

```




```jsx | pure

  

  

  

```

## Example

https://steps.vercel.app/

## API

  

    

      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

    

  

### Steps.Step

  

    

      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

    

  

## Development

```bash

npm install

npm start

```

## License

rc-steps is released under the MIT license.