vue-pithy-progress
v0.1.1
Published
Progress bar component for Vue.js(2.x). This project contains three common components(circle-progress、semi-circle-progres、progress-bar)uses SVG to show progress.
Downloads
200
Maintainers
Readme
vue-pithy-progress
Progress bar component for Vue.js(2.x). This project contains three common components(circle-progress、semi-circle-progres、progress-bar)uses SVG to show progress.
English|中文
Installation
npm install vue-pithy-progress
Usage
Global registration
import VuePithyProgress from 'vue-pithy-progress'
import 'vue-pithy-progress/dist/vue-pithy-progress.css'
Vue.use(VuePithyProgress)
<circle-progress :percentage="percentage"> </circle-progress>
<semi-circle-progress :percentage="percentage" />
<progress-bar :percentage="percentage" />
Use single component
import semiCircleProgress from 'vue-pithy-progress/lib/semi-circle-progress.umd.min.js'
import 'vue-pithy-progress/lib/semi-circle-progress.css'
<semi-circle-progress :percentage="percentage" />
export default {
name: 'App',
data() {
return {
percentage: 10
}
},
components: { semiCircleProgress }
}
demo
<template>
<div id="app">
<div class="con">
<circle-progress :percentage="percentage"> </circle-progress>
</div>
<div style="margin-top:10px;">
<semi-circle-progress :percentage="percentage" />
</div>
<div style="width:220px; margin-top:60px;">
<progress-bar :percentage="percentage" />
</div>
<div class="btn-wrapper" style="margin-top:10px;">
<button @click="changeProgrss">increase</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
percentage: 10
}
},
methods: {
changeProgrss() {
this.percentage += 10
}
}
}
</script>
circle-progress
props
| Name | Default value | Type | Description | | ---- | ---- | ---- | ---- | | percentage | 0 | Number | Rate of progress. | | r | 50 | Number | Radius of circle. | | stroke-width | 5 | Number | The width of the progress bar. | | bg-color | #ffffff | String | The background color of the circle.| | stroke-bg-color | #ffcaca | String | The background color of the progress bar. | | stroke-color | #e57d4b | String | The color of progress bar. | | stroke-linecap | round | String | The type of stroke linecap for circle.(sqaure butt round) | | duration | 0.3 | Number | Transition time for progress changes. |
slots
| Name | Description | | ---- | ---- | | default | custom text content. |
semi-circle-progress
props
| Name | Default value | Type | Description | | ---- | ---- | ---- | ---- | | percentage | 0 | Number | Rate of progress. | | r | 50 | Number | Radius of circle. | | stroke-width | 5 | Number | The width of the progress bar. | | bg-color | #ffffff | String | The background color of the circle.| | stroke-bg-color | #ffcaca | String | The background color of the progress bar. | | stroke-color | #e57d4b | String | The color of progress bar. | | stroke-linecap | round | String | The type of stroke linecap for circle.(sqaure butt round) | | duration | 0.3 | Number | Transition time for progress changes. |
slots
| Name | Description | | ---- | ---- | | default | custom text content. |
progress-abr
props
| Name | Default value | Type | Description | | ---- | ---- | ---- | ---- | | percentage | 0 | Number | Rate of progress. | | height | 8 | Number | Height of progress bar. | | unit | px | String | The css pixel unit. | | width | 100% | String | The width of progress bar.| | bg-color | #ffcaca | String | The background color of the progress bar. | | color | #e57d4b | String | The font color of progress bar. | | show-top-tip | true | Boolean | Show top tips of progress bar. | | tip-bg-color | #ffcaca | String | Background color of top tips. | | tip-font-color | #ff445a | String | Font color of top tips. |
slots
| Name | Description | | ---- | ---- | | default | custom text content(Top tip). |
Dev
npm install
npm run serve
build
npm run build