a bee-progress-bar component for tinper-bee
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
demo
dist
docs
src
test
.eslintignore
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
index.html
package.json

README.md

bee-progress-bar

npm version Build Status Coverage Status

记录进度或动态的显示进度变化

使用

使用单独的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