Sets or gets the disabled property.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :disabled="true">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

Sets or gets the jqxSplitter's height.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

Sets or gets the orientation property.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :orientation="'horizontal'">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

Sets or gets the panels property.

• size - sets the panel's size.
• min - sets the panel's minimum size.
• collapsible - sets whether the panel is collapsible.
• collapsed - sets whether the panel is collapsed.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :panels="panels">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    data: function () {
      return {
        panels: [{ size: 100 }, { size: 200 }]
      }
    }
  }
</script>

Sets or gets the resizable property. When this property is set to false, the user will not be able to move the split bar.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :resizable="false">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

Sets or gets the size of the split bar.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :splitBarSize="10">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

Sets or gets whether the split bar is displayed.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :showSplitBar="false">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</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>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600" :theme="'material'">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

Sets or gets the jqxSplitter's width.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    }
  }
</script>

This event is triggered when a panel is collapsed.

Code examples

Bind to the collapsed event of jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter" @collapsed="onCollapsed($event)"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    methods: {
      onCollapsed: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a panel is expanded.

Code examples

Bind to the expanded event of jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter" @expanded="onExpanded($event)"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    methods: {
      onExpanded: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the 'resize' operation has ended.

Code examples

Bind to the resize event of jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter" @resize="onResize($event)"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    methods: {
      onResize: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the 'resizeStart' operation has started.

Code examples

Bind to the resizeStart event of jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter" @resizeStart="onResizeStart($event)"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    methods: {
      onResizeStart: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Collapse a panel.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.collapse();
    }
  }
</script>

Destroys the jqxSplitter. This method will remove the jqxSplitter from the DOM and will remove all internal event handlers and styles.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.destroy();
    }
  }
</script>

Disables the jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.disable();
    }
  }
</script>

Enables the jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.disabled = true;

      this.$refs.mySplitter.enable();
    }
  }
</script>

Expands a panel.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.expand();
    }
  }
</script>

Renders the jqxSplitter.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.render();
    }
  }
</script>

Refreshes the jqxSplitter. This method will perform a layout and will arrange the split panels.

<template>
  <JqxSplitter ref="mySplitter"
    :width="600" :height="600">
    <div>Left Side</div>
    <div>Right Side</div>
  </JqxSplitter>
</template>

 
<script>
  import JqxSplitter from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue';
 
  export default {
    components: {
      JqxSplitter
    },
    mounted: function () {
      this.$refs.mySplitter.refresh();
    }
  }
</script>