Different layouts in Vue Splitter component
11 Jun 202414 minutes to read
By using splitter component, you can create the different layouts with multiple and nested panes.
Code editor style layout
Step 1:
Create the element with two child to render the outer splitter and render the first pane of vertical splitter as a horizontal splitter.
<template>
<ejs-splitter id='outerSplitter' ref="splitterObj" :created='onCreate' orientation='Vertical' class='splitterContent' width='100%' height='400px'>
<e-panes>
<e-pane size="53%" min ="30%" ></e-pane>
<e-pane :content='pane4Content'></e-pane>
</e-panes>
</ejs-splitter>
</template>
<style>
.code-editor #code-text {
margin-left: 5px;
}
.code-editor .code-preview {
margin-top: 15px;
font-size: 12px;
}
.code-editor #target {
margin: 20px auto;
max-width: 600px;
}
.code-editor.control-section{
min-height: 370px;
margin-bottom: 15px;
margin-top: 10px;
}
.code-editor .h3 {
font-size: 14px;
margin: 4px;
}
.code-editor .content {
padding: 12px;
}
.code-editor .splitter-image {
margin: 0 auto;
display: flex;
height: 115px;
margin-top: 10px;
}
</style>
<script setup>
import { SplitterComponent } from '@syncfusion/ej2-vue-layouts';
import { Splitter } from '@syncfusion/ej2-layouts';
export default Vue.extend({
data: function() {
return {
pane4Content: function () {
return { template : pane4Content }
},
pane1Content: `<div><div class="content"><h3 class="h3">HTML</h3><div class="code-preview"><<span>!DOCTYPE html></span><div><<span>html></span></div>
<div><<span>body></span></div><<span>div</span> id="custom-image"><div style="margin-left: 5px"><<span>img</span> src="src/albert.png"></div>
<div><<span>div</span>></div><div><<span>/body></span></div><div><<span>/html></span></div></div></div></div>`,
pane2Content: `<div><div class="content"><h3 class="h3">CSS</h3><div class="code-preview"><span>img {</span><div id="code-text">margin:<span>0 auto;</span></div>
<div id="code-text">display:<span>flex;</span></div><div id="code-text">height:<span>70px;</span></div><span>}</span></div></div></div>`,
pane3Content: `<div><div class="content"><h3 class="h3">JavaScript</h3><div class="code-preview"><span>var </span>
image = document.getElementById("custom-image");<div>image.addEventListener("click", function() {</div>
<div style="padding-left: 20px;">// Code block for click action</div><span> }</span></div></div></div>`,
pane4Content: `
<div>
<div class="content">
<h3 class="h3">Preview of sample</h3>
<div class="splitter-image">
<img class="img1" src="https://ej2.syncfusion.com/demos/src/listview/images/albert.png" style="width: 20%;margin: 0 auto;">
</div>
</div>
</div>
`
}
},
methods: {
onCreate: function () {
document.getElementById('outerSplitter').querySelector('.e-pane-vertical').setAttribute('id', 'Innersplitter');
this.splitterObj1 = new Splitter({
height: '220px',
paneSettings: [
{ size: '29%', min: '23%', content: this.pane1Content },
{ size: '20%', min: '15%', content: this.pane2Content },
{ size: '35%', min: '35%', content: this.pane3Content }
],
width: '100%'
});
this.splitterObj1.appendTo('#Innersplitter');
}
}
});
</script>Once the above configurations has been completed, you will get the output like this
Outlook style layout
Step 1:
Create the element with three panes and place the elements within the pane to render treeview, listview and RTE.
<template>
<ejs-splitter id='splitter' ref="splitterObj" width='100%' height='498px'>
<e-panes>
<e-pane size="28%" min="27%" :content='pane1Content'></e-pane>
<e-pane size="33%" min ="23%" :content='pane2Content'></e-pane>
<e-pane size="37%" min ="30%" :content='pane3Content'></e-pane>
</e-panes>
</ejs-splitter>
</template>
<style>
.outlook-style #target {
margin: 20px auto;
max-width: 820px;
}
.outlook-style #discard {
margin-left: 7px;
}
.outlook-style table {
width: 100%;
border: none;
}
.outlook-style td {
padding: 2px;
}
.outlook-style.control-section {
min-height: 370px;
}
.outlook-style .e-treeview .e-list-text {
width: 100%;
}
.outlook-style #groupedList.e-listview .e-list-group-item {
height: 0;
}
.outlook-style #splitter1 .settings.e-list-wrapper.e-list-multi-line.e-list-avatar {
padding: 15px;
}
.outlook-style #buttonSection {
padding: 7px;
}
.outlook-style #createpostholder {
padding-left: 3px;
padding-right: 4px;
}
</style>
<script setup>
import { SplitterComponent } from '@syncfusion/ej2-vue-layouts';
import pane1Content from "./outlook-pane1-content.vue";
import pane2Content from "./outlook-pane2-content.vue";
import pane3Content from "./outlook-pane3-content.vue";
export default Vue.extend({
data: function() {
return {
pane1Content: function () {
return { template : pane1Content }
},
pane2Content: function () {
return { template : pane2Content }
},
pane3Content: function () {
return { template : pane3Content }
}
}
}
});
</script>
Step 2 :
Create the separate template files to render the inner components.
Below template defined for treeview
<template>
<div>
<div class="tree-template-control-wrapper">
<ejs-treeview id="template" :fields="fields" cssClass="custom" :nodeTemplate="treeTemplate"></ejs-treeview>
</div>
</div>
</template>
<style>
.tree-template-control-wrapper .e-treeview .e-list-text {
width: 100%;
}
</style>
<script setup>
import { TreeViewComponent } from "@syncfusion/ej2-vue-navigations";
var mailBox = [
{ id: 1, name: 'Favorites', hasChild: true},
{ id: 2, pid: 1, name: 'Sales Reports', count: '4' },
{ id: 3, pid: 1, name: 'Sent Items'},
{ id: 4, pid: 1, name: 'Marketing Reports ', count: '6'},
{ id: 5, name: 'Andrew Fuller', hasChild: true, expanded: true },
{ id: 6, pid: 5, name: 'Inbox', selected: true , count: '20'},
{ id: 7, pid: 5, name: 'Drafts', count: '5'},
{ id: 8, pid: 5, name: 'Deleted Items'},
{ id: 9, pid: 5, name: 'Sent Items'},
{ id: 10, pid: 5, name: 'Sales Reports' , count: '4'},
{ id: 11, pid: 5, name: 'Marketing Reports', count: '6' },
{ id: 12, pid: 5, name: 'Outbox' },
{ id: 13, pid: 5, name: 'Junk Email'},
{ id: 14, pid: 5, name: 'RSS Feed'},
{ id: 15, pid: 5, name: 'Trash' }
];
var treeTemplate = Vue.component("demo", {
template: '<div><div class="treeviewdiv"><div style="float:left"><span class="treeName"></span></div>' +
'<div v-if="data.count" style="margin-right: 5px; float:right"><span class="treeCount e-badge e-badge-primary"></span></div></div></div>',
data() {
return {
data: {}
};
}
});
export default Vue.extend ({
data: function() {
return {
fields: { dataSource: mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
treeTemplate: function(e) {
return {
template: treeTemplate
};
},
};
}
});
</script>
Below template defined for listview
<template>
<div>
<ejs-listview id='listview' :dataSource='outlookdata' :cssClass='cssClass' :template='datatemplate'></ejs-listview>
</div>
</template>
<script setup>
import { ListViewComponent } from "@syncfusion/ej2-vue-lists";
import { enableRipple } from "@syncfusion/ej2-base";
import datatempVue from "./data-vue-template.vue";
enableRipple(false);
export default Vue.extend({
data: function() {
return {
cssClass: "e-list-template",
outlookdata: [
{ Name: 'Selma Tally', content1: 'Apology marketing email', content2:'Hello Ananya Singleton' },
{ Name: 'Illa Russo', content1: 'Annual conference', content2: 'Hi jeani Moresa' },
{ Name: 'Camden Macmellon', content1: 'Reference request- Camden hester', content2: 'Hello Kerry Best,' },
{ Name: 'Garth Owen', content1: 'Application for job Title', content2: 'Hello Illa Russo' },
{ Name: 'Ursula Patterson', content1: 'Programmaer Position Applicant', content2: 'Hello Kerry best,' }
],
datatemplate: function() {
return {
template: datatempVue
};
}
};
}
});
</script>
Below template defined for RTE
<template>
<div>
<div style="width: 100%; padding: 15px;">
<table>
<tr>
<td><ejs-button cssClass='e-flat e-outline' isprimary=true >To...</ejs-button></td>
<td><ejs-textbox id="firstname" /></td>
</tr>
<tr>
<td><ejs-button cssClass='e-flat e-outline'>Cc...</ejs-button></td>
<td><ejs-textbox id="lastname" /></td>
</tr>
<tr>
<td><div id="subject-text">Subject</div></td>
<td><ejs-textbox id="subject" /></td>
</tr>
</table>
</div>
<div class="forum">
<div id="createpostholder">
<ejs-richtexteditor ref="rteInstance" height='262px'></ejs-richtexteditor>
<div id="buttonSection">
<ejs-button :isPrimary="isPrimary" id="send" >Send</ejs-button>
<ejs-button id="discard" >Discard</ejs-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { RichTextEditorComponent, Link, Image, HtmlEditor, Toolbar } from "@syncfusion/ej2-vue-richtexteditor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';
export default Vue.extend({
data: function() {
return {
isPrimary: true
};
},
mounted: function() {
this.$nextTick(function () {
this.$refs.rteInstance.$el.ej2_instances[0].refresh();
})
},
provide:{
richtexteditor:[Link, Image, HtmlEditor, Toolbar]
}
});
</script>
Once the above configurations has been completed, you will get the output like this.