1 | # bee-step
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/bee-step.svg)](https://www.npmjs.com/package/bee-step)
|
4 | [![Build Status](https://img.shields.io/travis/tinper-bee/bee-step/master.svg)](https://travis-ci.org/tinper-bee/bee-step)
|
5 | [![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-step/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-step?branch=master)
|
6 | [![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-step.svg)](https://david-dm.org/tinper-bee/bee-step#info=devDependencies)
|
7 | [![NPM downloads](http://img.shields.io/npm/dm/bee-step.svg?style=flat)](https://npmjs.org/package/bee-step)
|
8 | [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-step.svg)](http://isitmaintained.com/project/tinper-bee/bee-step "Average time to resolve an issue")
|
9 | [![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-step.svg)](http://isitmaintained.com/project/tinper-bee/bee-step "Percentage of issues still open")
|
10 |
|
11 | ## Browser Support
|
12 |
|
13 | |![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
|
14 | | --- | --- | --- | --- | --- |
|
15 | | IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
16 |
|
17 |
|
18 |
|
19 | 当任务复杂或具有子任务的系列一定的序列,我们可以将它分解成几个步骤,让事情变得更容易。
|
20 |
|
21 | ## 使用
|
22 | 使用单独的bee-step包
|
23 | #### 组件引入
|
24 | 先进行下载bee-step包
|
25 |
|
26 | ```js
|
27 | ```
|
28 | npm install --save bee-step
|
29 |
|
30 | ```
|
31 | ```js
|
32 | import Step from 'bee-step';
|
33 | const Steps = Step.Steps;
|
34 | class Demo1 extends Component {
|
35 | render () {
|
36 | return (
|
37 | <Step.Steps current={1}>
|
38 | <Step title="Finished" description="This is a description." />
|
39 | <Step title="In Progress" description="This is a description." />
|
40 | <Step title="Waiting" description="This is a description." />
|
41 | </Step.Steps>
|
42 | )
|
43 | }
|
44 | }
|
45 |
|
46 | render(Demo1,document.getElementById('app'));
|
47 |
|
48 | ```
|
49 |
|
50 |
|
51 | ## API
|
52 |
|
53 | |Property|Description|Type|Default|
|
54 | |:---|:-----|:----|:------|
|
55 | |status|自动设置当前step的状态(wait|process|finish|error)|string|-|
|
56 | |title|step的标题|(string|ReactNode)|-|
|
57 | |description|step的细节描述,可选的属性|(string|ReactNode)|-|
|
58 | |icon|设置当前step为icon,可选的属性|string|ReactNode)|-|
|
59 |
|
60 | ### Step.Steps
|
61 | |Property|Description|Type|Default|
|
62 | |:---|:-----|:----|:------|
|
63 | |current|设置当前步骤,从0开始计数。可以使用步骤状态重写此状态。|number|0|
|
64 | |status|指定当前步骤的状态(danger|info|news|warning|sucess|process)|string|process|
|
65 | |size|设置step bar的大小(default|samll)|string|default|
|
66 | |direction|设置step bar的方向(horizontal|vertical)|string|horizontal|
|
67 |
|
68 | #### 开发调试
|
69 |
|
70 | ```sh
|
71 | $ npm install -g bee-tools
|
72 | $ git clone https://github.com/tinper-bee/bee-step
|
73 | $ cd bee-step
|
74 | $ npm install
|
75 | $ npm run dev
|
76 | ```
|