tinper-beebee-progress-bar
记录进度或动态的显示进度变化
使用
使用单独的bee-progress-bar包
组件引入
先进行下载bee-progress-bar包
npm install --save bee-progress-bar组件调用
import ProgressBar from 'bee-progress-bar';
React.render(
<ProgressBar now={10} />, document.getElementById('target'));样式引入
- 可以使用link引入dist目录下bee-pagination.css
<link rel="stylesheet" href="./node_modules/build/bee-progress-bar.css"> - 可以在js中import样式
import "./node_modules/src/ProgressBar.scss" //或是 import "./node_modules/build/bee-progress-bar.css"
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| min | 最小值 | number | 0 |
| max | 最大值 | number | 100 |
| now | 显示值 | number | '' |
| srOnly | label 只读不显示 | bool | false |
| striped | 条纹样式 | bool | false |
| active | 激活状态 | bool | false |
| colors | 颜色oneOf:danger,info,warning,success,primary,dark | string | '' |
顶部进度条API
ProgressBar.start()
开始显示顶部进度条
ProgressBar.set(arg)
设置显示百分比位置，arg: 0~1
ProgressBar.inc()
加快进度
ProgressBar.end()
直接结束进度
注：具体使用可以参考例四！
开发调试
$ git clone https://github.com/tinper-bee/bee-progress-bar
$ cd bee-progress-bar
$ npm install
$ npm run dev