记录进度或动态的显示进度变化
使用单独的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"
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 | '' |
开始显示顶部进度条
设置显示百分比位置,arg: 0~1
加快进度
直接结束进度
注:具体使用可以参考例四!
$ git clone https://github.com/tinper-bee/bee-progress-bar
$ cd bee-progress-bar
$ npm install
$ npm run dev