Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

A wrapper library for GaugeJS

License

NotificationsYou must be signed in to change notification settings

amroessam/vgauge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A Vue Wrapper toGaugeJS

If this package helps you, consider buying me a beer 😁

paypal

Play

Live Demo

Installing

npm i vgauge --save

or

<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vgauge@latest"></script>

Usage

By Importing

importVGaugefrom'vgauge';exportdefault{components:{    VGauge},data(){return{value:35};}};
<v-gauge:value="value"/>

By Including

<divid="app"><h3>Will not stop at 100</h3><v-gauge:value="x"top></v-gauge><h3>Will stop at 100</h3><v-gauge:value="y"unit="%"></v-gauge></div><script>varapp=newVue({el:'#app',data:{x:0,y:0},mounted(){setInterval(()=>{this.x+=4;},1000);setInterval(()=>{if(this.y<100)this.y+=5;},1000);}});</script>

Props

You can use the following props

NameDescriptionTypeDefault
optionsGaugeJS render options, check gaugejsAPIObjectBasic gaugejs Object
donutRenders a donut instead of a gauge#3Booleanfalse
heightheight of the gauge in pixelsString200px
widthwidth of the gauge in pixelsString200px
unitunit to show after valueString''
initialValueInitial value to display on the GaugeNumber0
valueValue to display/watchNumber50
minValueMin value for the gauge to displayNumber0
maxValueMax value for the gauge to displayNumber100
decimalPlaceShow decimal place values to which extentNumber0
topTo have the gauge value on top of the gaugeBooleanfalse
gaugeValueClassClass to apply to gauge value (Must use/deep/ in css selector)String*
animationSpeedAnimation speed for gaugeNumber10

Authors

License

This project is licensed under the MIT License

Acknowledgments


[8]ページ先頭

©2009-2025 Movatter.jp