Specifies the interval between two Click events. This property is available only in the jqxRepeatButton. The jqxRepeatButton raises Click events repeatedly when the button is pressed.

<template> 
  <div> 
    <JqxRepeatButton ref="myRepeatButton" @click="onClick()" 
      :value="'Click'" :width="80" :delay="50" />
    <div>{{ counter }}</div>
  </div> 
</template> 
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default { 
    components: { 
      JqxRepeatButton 
    }, 
    data: function () { 
      return { 
        counter: 0 
      } 
    },
    methods: {
      onClick: function () {
        this.counter++;
      }
    }
  }
</script>

Enables or disables the button.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :disabled="true"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's height.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :height="40"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's image source.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's image width.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :imgWidth="16"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's image height.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :imgHeight="16"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's image position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :imgPosition="'left'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

Possible Values:

'all' - for all corners

'top'- for top corners

'bottom' - for bottom corners

'left' - for left corners

'right' - for right corners

'top-right' - for top right corners

'top-left' - for top left corners

'bottom-right' - for bottom right corners

'bottom-left' - for bottom left corners

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :roundedCorners="'top'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :rtl="true"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's text position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :textPosition="'left'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's text image relation. Possible values: "imageBeforeText", "imageAboveText", "textAboveImage", "textBeforeImage" and "overlay".

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :imgSrc="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
    :textImageRelation="'imageBeforeText'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :theme="'material'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Determines the button's template as an alternative of the default styles.

Possible Values:

'default' - the default button's template. The button's style depends only on its "theme" property value.

'primary' - dark blue button for extra visual weight.

'success' - green button for successful or positive action.

'warning' - orange button which indicates caution.

'danger' - red button which indicates a dangerous or negative action.

'inverse' - dark gray button, not tied to a semantic action or use.

'info' - blue button, not tied to a semantic action or use.

'link' - making it look like a link .

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :template="'success'"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's toggle state. ( available in jqxToggleButton ).

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80" :toggled="true"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets ot gets the button's width.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

Sets or gets the button's value.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Button'" :width="80"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    }
  }
</script>

This event is triggered when the button is clicked.

Code examples

Bind to the click event of jqxRepeatButton.

<template>
  <JqxRepeatButton ref="myRepeatButton" @click="onClick($event)"
    :value="'Click'" :width="80"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    },
    methods: {
      onClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    },
    mounted: function () {
      this.$refs.myRepeatButton.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    },
    mounted: function () {
      this.$refs.myRepeatButton.focus();
    }
  }
</script>

Renders the widget.

<template>
  <JqxRepeatButton ref="myRepeatButton"
    :value="'Click'" :width="80"
  />
</template>
 
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
 
  export default {
    components: {
      JqxRepeatButton
    },
    mounted: function () {
      this.$refs.myRepeatButton.render();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxRepeatButton ref="myRepeatButton"
           :value="'Click'" :width="80" />
</template>
<script>
  import JqxRepeatButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrepeatbutton.vue';
  export default {
    components: {
      JqxRepeatButton
    },
    mounted: function () {
      this.$refs.myRepeatButton.val('Value');
    }
  }
</script>