| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
Sets or gets whether the scrollbar is disabled.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :disabled="true"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
height
|
Number | String
|
null
|
Sets or gets height of the scroll bar.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
largestep
|
Number
|
50
|
Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :largestep="100"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
min
|
Number
|
0
|
Sets or gets the scrollbar's minimum value.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :min="20" :value="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
max
|
Number
|
1000
|
Sets or gets the scrollbar's maximum value.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :max="100" :value="50"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</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>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :rtl="true"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
step
|
Number
|
10
|
Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :step="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
showButtons
|
Boolean
|
true
|
Sets or gets whether the scrollbar displays the increase and decrease arrow buttons.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :showButtons="false"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
thumbMinSize
|
Number
|
10
|
Specifies the scrollbar thumb's minimum size.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :thumbMinSize="30"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :theme="'material'"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
vertical
|
Boolean
|
false
|
Sets or gets the scrollbar's orientation.
<template>
<JqxScrollBar ref="myScrollBar"
:width="20" :height="180" :vertical="true"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
value
|
Number
|
0
|
Sets or gets the scrollbar's value.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20" :value="200"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
width
|
Number | String
|
null
|
Sets or gets width of the scroll bar.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
}
}
</script>
|
|
|
|
valueChanged
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the valueChanged event of jqxScrollBar.
<template>
<JqxScrollBar ref="myScrollBar" @valueChanged="onValueChanged($event)"
:width="180" :height="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
},
methods: {
onValueChanged: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
destroy
|
None
|
None
|
Destroys the widget.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
},
mounted: function () {
this.$refs.myScrollBar.destroy();
}
}
</script>
|
|
isScrolling
|
None
|
Boolean
|
Returns true, if the user is scrolling. Otherwise, returns false.
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
},
mounted: function () {
const value = this.$refs.myScrollBar.isScrolling();
}
}
</script>
|
|
setPosition
|
index
|
None
|
Sets the thumb's position
<template>
<JqxScrollBar ref="myScrollBar"
:width="180" :height="20"
/>
</template>
<script>
import JqxScrollBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollbar.vue';
export default {
components: {
JqxScrollBar
},
mounted: function () {
this.$refs.myScrollBar.setPosition(10);
}
}
</script>
|