| Name | Type | Default |
|---|
|
animationDuration
|
Number
|
300
|
Determines the duration of the progressbar's animation.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :animationDuration="1000"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
colorRanges
|
Array
|
[]
|
Determines different color segments.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :colorRanges="colorRanges"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
},
data: function () {
return {
colorRanges: [
{ stop: 20, color: "red" },
{ stop: 70, color: "blue" }
]
}
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Determines whether the progress bar is disabled.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :disabled="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
height
|
Number | String
|
null
|
Sets or gets the progress bar's height.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :height="50"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
layout
|
String
|
"normal"
|
Sets or gets the jqxProgressBar's layout.
Possible Values:
'normal'
'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :layout="'reverse'"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
max
|
Number
|
100
|
Sets or gets the progress bar's max value.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :max="250"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
min
|
Number
|
0
|
Sets or gets the progress bar's min value.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :min="30"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
orientation
|
String
|
'horizontal'
|
Sets or gets the orientation.
Possible Values:
'vertical'
'horizontal'
<template>
<JqxProgressBar ref="myProgressBar"
:width="40" :value="50" :showText="true" :height="500" :orientation="'vertical'"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
rtl
|
Boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :rtl="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
renderText
|
Object | Function
|
null
|
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :renderText="renderText"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
},
methods: {
renderText: function (text) {
return "<span style='background: #ffe8a6; color: #e53d37; font-style: italic;'>" + text + "</span>";
}
}
}
</script>
|
|
showText
|
Boolean
|
false
|
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
template
|
String
|
'default'
|
Determines the template as an alternative of the default styles.
Possible Values:
'default' - the default template. The style depends only on the "theme" property value.
'primary' - dark blue style for extra visual weight.
'success' - green style for successful or positive action.
'warning' - orange style which indicates caution.
'danger' - red style which indicates a dangerous or negative action.
'info' - blue button, not tied to a semantic action or use.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :template="'success'"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true" :theme="'material'"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
value
|
Number
|
0
|
Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100).
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
width
|
Number | String
|
null
|
Sets or gets the progress bar's width.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
}
}
</script>
|
|
|
|
complete
|
Event
|
|
This event is triggered when the value is equal to the max. value.
Code examples
Bind to the complete event of jqxProgressBar.
<template>
<div>
<JqxProgressBar ref="myProgressBar" @complete="onComplete($event)"
:width="500" :value="50" :showText="true" />
<JqxButton style="margin-top: 15px;" :width="80" @click="setValue()">Set value</JqxButton>
</div>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxProgressBar,
JqxButton
},
methods: {
setValue: function () {
this.$refs.myProgressBar.val(100);
},
onComplete: function (event) {
alert('do something...');
}
}
}
</script>
|
|
invalidValue
|
Event
|
|
This event is triggered when the user enters an invalid value( value which is not number or is out of the min - max range. )
Code examples
Bind to the invalidValue event of jqxProgressBar.
<template>
<div>
<JqxProgressBar ref="myProgressBar" @invalidValue="onInvalidValue($event)"
:width="500" :value="50" :showText="true" :min="0" :max="100" />
<JqxButton style="margin-top: 15px;" :width="80" @click="setValue()">Set value</JqxButton>
</div>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxProgressBar,
JqxButton
},
methods: {
setValue: function () {
this.$refs.myProgressBar.val(-5);
},
onInvalidValue: function (event) {
alert('do something...');
}
}
}
</script>
|
|
valueChanged
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the valueChanged event of jqxProgressBar.
<template>
<div>
<JqxProgressBar ref="myProgressBar" @valueChanged="onValueChanged($event)"
:width="500" :value="50" :showText="true" />
<JqxButton style="margin-top: 15px;" :width="80" @click="setValue()">Set value</JqxButton>
</div>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxProgressBar,
JqxButton
},
methods: {
setValue: function () {
this.$refs.myProgressBar.val(100);
},
onValueChanged: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
actualValue
|
value
|
None
|
Sets the progress bar's value.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
},
mounted: function () {
this.$refs.myProgressBar.actualValue(20);
}
}
</script>
|
|
destroy
|
None
|
None
|
Destroys the widget.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
},
mounted: function () {
this.$refs.myProgressBar.destroy();
}
}
</script>
|
|
val
|
value
|
Number
|
Sets or gets the value.
<template>
<JqxProgressBar ref="myProgressBar"
:width="500" :value="50" :showText="true"
/>
</template>
<script>
import JqxProgressBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxprogressbar.vue';
export default {
components: {
JqxProgressBar
},
mounted: function () {
const value = this.$refs.myProgressBar.val();
}
}
</script>
|