https://github.com/g770728y/react-logic-steps

react逻辑组件, 帮助实现类似于steps的功能(未提供ui)
https://github.com/g770728y/react-logic-steps

Last synced: 8 months ago
JSON representation

react逻辑组件, 帮助实现类似于steps的功能(未提供ui)

• Host: GitHub
• URL: https://github.com/g770728y/react-logic-steps
• Owner: g770728y
• Created: 2018-12-01T08:49:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-01T09:36:37.000Z (almost 7 years ago)
• Last Synced: 2025-02-05T23:49:10.571Z (9 months ago)
• Language: JavaScript
• Homepage: https://g770728y.github.io/react-logic-steps/
• Size: 327 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-logic-steps

>

[![NPM](https://img.shields.io/npm/v/react-logic-steps.svg)](https://www.npmjs.com/package/react-logic-steps) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## 简述

这是一个简单的行为组件, 用于实现线性向导页时(也就是只有上一步、下一步这样的向导页)

此组件并不提供 ui 界面

## 场景

### 忘记密码

分填手机、填验证码、重置密码三个 panel, 这是另一种形态的 steps

搜到的 steps 组件都包含 ui, 与当前界面偏差很大

### 简单、线性的向导页

只包含上一步、下一步功能, 页面转向没有分叉

具体参见 exmple

## Install

```bash

npm install --save react-logic-steps

or

yarn add react-logic-steps

```

## Usage

```tsx

import * as React from 'react';

import Steps from 'react-logic-steps';

class Example extends React.Component {

  getContent = current => {

    switch (current) {

      case 'first':

        return 第一步;

      case 'second':

        return 第二步;

      case 'third':

        return 第三步;

      case 'fourth':

        return 第四步;

      default:

        return null;

    }

  };

  render() {

    return (

      

        {(current, isFirst, isLast, onBack, onForward) => {

          return (

            


              
{this.getContent(current)}

              

                向后

              

              

                向前

              

            

          );

        }}

      

    );

  }

}

```


## License

MIT © [g770728y](https://github.com/g770728y)