bee-step
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 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