bee-step

Step ui component for react

Usage no npm install needed!

<script type="module">
  import beeStep from 'https://cdn.skypack.dev/bee-step';
</script>

README

bee-step

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

Browser Support

IE Chrome Firefox Opera Safari
IE 9+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

当任务复杂或具有子任务的系列一定的序列,我们可以将它分解成几个步骤,让事情变得更容易。

使用

使用单独的bee-step包

组件引入

先进行下载bee-step包

npm install --save bee-step

```js
import Step from 'bee-step';
const Steps = Step.Steps;
class Demo1 extends Component {
    render () {
        return (
            <Step.Steps current={1}>
                <Step title="Finished" description="This is a description." />
                <Step title="In Progress" description="This is a description." />
                <Step title="Waiting" description="This is a description." />
            </Step.Steps>
        )
    }
}

render(Demo1,document.getElementById('app'));

API

Property Description Type Default
status 自动设置当前step的状态(wait,process,finish,error) string -
title step的标题 (string,ReactNode) -
description step的细节描述,可选的属性 (string,ReactNode) -
icon 设置当前step为icon,可选的属性 string,ReactNode -

Step.Steps

Property Description Type Default
current 设置当前步骤,从0开始计数。可以使用步骤状态重写此状态。 number 0
status 指定当前步骤的状态(danger,info,news,warning,sucess,process) string process
size 设置step bar的大小(default,samll) string default
direction 设置step bar的方向(horizontal,vertical) string horizontal

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-step
$ cd bee-step
$ npm install
$ npm run dev