| Name | Type | Default |
|---|
|
checked
|
Boolean
|
false
|
Sets or gets the check state.
<template>
<JqxSwitchButton ref="mySwitchButton"
:checked="true"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Sets or gets whether the switch button is disabled.
<template>
<JqxSwitchButton ref="mySwitchButton"
:disabled="true"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
height
|
Number | String
|
null
|
Sets or gets the height.
<template>
<JqxSwitchButton ref="mySwitchButton"
:height="50"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
orientation
|
String
|
'horizontal'
|
Determines the jqxSwitchButton's orientation.
Possible Values:
'horizontal'
'vertical'
<template>
<JqxSwitchButton ref="mySwitchButton"
:orientation="'vertical'"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
onLabel
|
String
|
'On'
|
Sets or gets the string displayed when the button is checked.
<template>
<JqxSwitchButton ref="mySwitchButton"
:onLabel="'On Label'"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
offLabel
|
String
|
'Off'
|
Sets or gets the string displayed when the button is unchecked.
<template>
<JqxSwitchButton ref="mySwitchButton"
:offLabel="'Off Label'"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
thumbSize
|
String
|
'40%'
|
Sets or gets the size of the thumb in percentages.
<template>
<JqxSwitchButton ref="mySwitchButton"
:thumbSize="'30%'"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
rtl
|
Boolean
|
false
|
<template>
<JqxSwitchButton ref="mySwitchButton"
:rtl="true"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
width
|
Number | String
|
null
|
Sets or gets the width.
<template>
<JqxSwitchButton ref="mySwitchButton"
:width="50"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
}
}
</script>
|
|
|
|
checked
|
Event
|
|
This event is triggered when the switch button is checked.
Code examples
Bind to the checked event of jqxSwitchButton.
<template>
<JqxSwitchButton ref="mySwitchButton" @checked="onChecked($event)"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
methods: {
onChecked: function (event) {
alert('do something...');
}
}
}
</script>
|
|
change
|
Event
|
|
This event is triggered when the switch button's state changes from one state to another.
Code examples
Bind to the change event of jqxSwitchButton.
<template>
<JqxSwitchButton ref="mySwitchButton" @change="onChange($event)"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
methods: {
onChange: function (event) {
alert('do something...');
}
}
}
</script>
|
|
unchecked
|
Event
|
|
This event is triggered when the switch button is unchecked.
Code examples
Bind to the unchecked event of jqxSwitchButton.
<template>
<JqxSwitchButton ref="mySwitchButton" @unchecked="onUnchecked($event)"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
methods: {
onUnchecked: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
check
|
None
|
None
|
Checks the button.
<template>
<JqxSwitchButton ref="mySwitchButton"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
mounted: function () {
this.$refs.mySwitchButton.check();
}
}
</script>
|
|
disable
|
None
|
None
|
Disables the switch button.
<template>
<JqxSwitchButton ref="mySwitchButton"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
mounted: function () {
this.$refs.mySwitchButton.disable();
}
}
</script>
|
|
enable
|
None
|
None
|
Enables the switch button.
<template>
<JqxSwitchButton ref="mySwitchButton"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
mounted: function () {
this.$refs.mySwitchButton.enable();
}
}
</script>
|
|
toggle
|
None
|
None
|
Toggles the check state. This method is automatically called when the user clicks the switch button.
<template>
<JqxSwitchButton ref="mySwitchButton"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
mounted: function () {
this.$refs.mySwitchButton.toggle();
}
}
</script>
|
|
uncheck
|
None
|
None
|
Unchecks the button.
<template>
<JqxSwitchButton ref="mySwitchButton"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
mounted: function () {
this.$refs.mySwitchButton.uncheck();
}
}
</script>
|
|
val
|
value
|
Boolean
|
Sets or gets the value.
<template>
<JqxSwitchButton ref="mySwitchButton"
/>
</template>
<script>
import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
export default {
components: {
JqxSwitchButton
},
mounted: function () {
const value = this.$refs.mySwitchButton.val();
}
}
</script>
|