Skip to content

Instantly share code, notes, and snippets.

ShanikaNishadhi

Block or report user

Report or block ShanikaNishadhi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<div class="splitter-panel">
Left Panel
</div>
View App.vue
<JqxSplitter
:width="'100%'" :height="'100%'"
:panels="[{ size: 200 }, { size: 200}]">
<div>
Left Panel
</div>
<div>
<JqxTabs class="jqx-hideborder jqx-hidescrollbars"
:width="'100%'" :height="'100%'">
<ul>
View App.vue
data: function () {
return {
width: 800,
height: 500,
panels: [{ size: '50%', min: '10%', collapsible: false }, { size: '50%', min: '5%' }]
}
}
View App.vue
<template>
<JqxSplitter :width="850" :height="850" :orientation="'horizontal'"
:panels="[{ size: '50%' }, { size: '50%' }]">
<div>
<JqxSplitter class="jqx-splitter-nested"
:width="'100%'" :height="'100%'" :orientation="'vertical'"
:panels="[{ size: 300, collapsible: false }]">
<div>
<JqxSplitter class="jqx-splitter-nested"
:width="'100%'" :height="'100%'" :orientation="'horizontal'"
View App.vue
<JqxSplitter class="jqx-splitter-nested"
:width="'100%'" :height="'100%'" :orientation="'horizontal'"
:panels="[{ size: 150 }]">
<div>
<span>Panel 1</span>
</div>
<div>
<span>Panel 2</span>
</div>
</JqxSplitter>
View App.vue
<JqxSplitter class="jqx-splitter-nested" :width="'100%'" :height="'100%'" :orientation="'vertical'"
:panels="[{ size: 300, collapsible: false }]">
// we will add more splitter in this below div.
<div>
</div>
// Set the name for once panel.
<div>
<span>Panel 3</span>
</div>
View App.vue
<template>
<JqxSplitter :width="850" :height="850" :orientation="'horizontal'"
:panels="[{ size: '50%' }, { size: '50%' }]">
// we will add more splitter in this div.
<div>
</div>
</JqxSplitter>
</template>
View App.vue
<template>
<JqxSplitter: height="height" :width="width"
:panels="panels">
<div>Panel One</div>
<div>Panel Two</div>
</JqxSplitter>
</template>
View App.vue
<script>
import JqxSplitter from 'jqwidgets-scripts/jqwidgets- vue/vue_jqxsplitter.vue';
</script>
You can’t perform that action at this time.