Vue UI Components Documentation

Sets or gets the direction of the animation. You can use this property when "animationType" is set to 'slide'.

'left'

'right'

'top'

'bottom'

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :animationType="'fade'" :animationDirection="'top'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets or gets the speed of the animation when the panel hides. The delay represents the time of starting until the final hiding.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :animationType="'fade'" :animationHideDelay="800">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets or gets the speed of the animation when the panel shows. The delay represents the time of it's starting until the final positioning.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :animationType="'fade'" :animationShowDelay="800">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets the type of animation using for show/hide the panel.

'fade'

'slide'

'none'

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :animationType="'none'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

When is set to true, after click outside of the responsive panel it closes.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :autoClose="false">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

If is set, changes the browser's width, where the panel shows/hides.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets or gets the width of the panel when it is collapsed.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :collapseWidth="800">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets or gets the responsive panel's height.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Initializes the responsive panel content.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :initContent="initContent">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxResponsivePanel,
      JqxButton
    },
    methods: {
      initContent: function () {
        jqwidgets.createInstance('#button', 'jqxButton', { width: 100, height: 50 });
      }
    }
  }
</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>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :theme="'material'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets or gets the element, where toggleButton is rendered.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets the size of toggleButton.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'" :toggleButtonSize="40">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

Sets or gets the responsive panel's width.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    }
  }
</script>

This event is triggered when the responsive panel finishes it's closing.

Code examples

Bind to the close event of jqxResponsivePanel.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" @close="onClose($event)" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the the browser's width becomes smaller than the value of collapseBreakpoint.

Code examples

Bind to the collapse event of jqxResponsivePanel.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" @collapse="onCollapse($event)" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    methods: {
      onCollapse: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the the browser's width becomes greather than the value of collapseBreakpoint.

Code examples

Bind to the expand event of jqxResponsivePanel.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" @expand="onExpand($event)" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    methods: {
      onExpand: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the responsive panel finishes it's opening.

Code examples

Bind to the open event of jqxResponsivePanel.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" @open="onOpen($event)" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Closes the responsive panel.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="200" :collapseBreakpoint="2000" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
    <JqxButton @click="open">Open</JqxButton>
    <JqxButton @click="close">Close</JqxButton>
  </div>
</template>
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxResponsivePanel,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myResponsivePanel.open();
      },
      close: function () {
        this.$refs.myResponsivePanel.close();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Destroy the widget.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    mounted: function () {
      this.$refs.myResponsivePanel.destroy();
    }
  }
</script>

Returns true or false when the panel is collapsed or expanded.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    mounted: function () {
      const value = this.$refs.myResponsivePanel.isCollapsed();
    }
  }
</script>

Returns true or false when the panel is opened or closed.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    mounted: function () {
      const value = this.$refs.myResponsivePanel.isOpened();
    }
  }
</script>

Open the responsive panel.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="200" :collapseBreakpoint="2000" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
    <JqxButton @click="open">Open</JqxButton>
    <JqxButton @click="close">Close</JqxButton>
  </div>
</template>
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxResponsivePanel,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myResponsivePanel.open();
      },
      close: function () {
        this.$refs.myResponsivePanel.close();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Refreshes the widget.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    mounted: function () {
      this.$refs.myResponsivePanel.refresh();
    }
  }
</script>

Render the widget.

<template>
  <div>
    <div id="toggleResponsivePanel"></div>
    <JqxResponsivePanel ref="myResponsivePanel" :width="500" :height="500" :collapseBreakpoint="800" :toggleButton="'#toggleResponsivePanel'">
      <h4>jQWidgets</h4>
      <p>jQWidgets provides a comprehensive solution for building professional web sites and mobile apps. It is built entirely on open standards and technologies like HTML5, CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps you create apps and websites that look beautiful on desktops, tablets and smart phones.</p>
      <input type='button' id='button' value='Learn more' />
    </JqxResponsivePanel>
  </div>
</template>
 
<script>
  import JqxResponsivePanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxresponsivepanel.vue';
 
  export default {
    components: {
      JqxResponsivePanel
    },
    mounted: function () {
      this.$refs.myResponsivePanel.render();
    }
  }
</script>