Different layouts in Angular Splitter component
4 Apr 202322 minutes to read
By using splitter control, 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 create the inner splitter from first pane of vertical splitter.
<ejs-splitter #splitterInstance id="outerSplitter" (created)='onCreated()' orientation='Vertical' height='400px' width='100%'>
<e-panes>
<e-pane size='53%' min='30%'></e-pane>
<e-pane>
<ng-template #content>
<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>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter> public onCreated () {
document.getElementById('outerSplitter').querySelector('.e-pane-vertical').setAttribute('id', 'Innersplitter');
let 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%'
});
splitterObj1.appendTo('#Innersplitter');
} .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;
}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.
<ejs-splitter id="splitter1" #splitter1 height='493px' width='100%'>
<e-panes>
<e-pane size='28%' min='27%'>
<ng-template #content>
<div class="content">
<ejs-treeview id="template" [fields]="field">
<!-- Template to render tree node -->
<ng-template #nodeTemplate="" let-data="">
<div>
<div class="treeviewdiv">
<div style="float:left">
<span class="treeName"></span>
</div>
<div style="margin-right: 5px; float:right">
<span class="treeCount e-badge e-badge-primary" *ngIf="data.count"></span>
</div>
</div>
</div>
</ng-template>
</ejs-treeview>
</div>
</ng-template>
</e-pane>
<e-pane size='33%' min='23%'>
<ng-template #content>
<div class="content">
<ejs-listview [dataSource]='dataSource' cssClass='e-list-template'>
<ng-template #template let-dataSource="">
<div class="settings e-list-wrapper e-list-multi-line e-list-avatar">
<span class="e-list-item-header"></span>
<span class="e-list-content">
<div>
<div class="status">
</div>
<div id="list-message">
</div>
</div>
</span>
</div>
</ng-template>
</ejs-listview>
<div id="groupedList" tabindex="1"></div>
</div>
</ng-template>
</e-pane>
<e-pane size='37%' min='30%'>
<ng-template #content>
<div class="content">
<div style="width: 100%; padding: 15px;">
<table>
<tr>
<td><button class="e-btn e-flat e-outline">To...</button></td>
<td><ejs-textbox id="firstname" ></ejs-textbox>
</tr>
<tr>
<td><button class="e-btn e-flat e-outline">Cc...</button></td>
<td><ejs-textbox id="lastname" ></ejs-textbox>
</tr>
<tr>
<td>
<div id="subject-text">Subject</div>
</td>
<td><ejs-textbox id="subject" ></ejs-textbox>
</tr>
</table>
</div>
<div class="forum">
<div id="createpostholder">
<ejs-richtexteditor id='blogRTE' #blogRTE height= '262px'></ejs-richtexteditor>
<div id='buttonSection'>
<button ejs-button [isPrimary]="true" id="send">Send</button>
<button ejs-button id="discard">Discard</button>
</div>
</div>
</div>
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
<!-- Template to render tree node -->
<script id="treeTemplate" type="text/x-template">
<div>
<div class="treeviewdiv">
<div style="float:left">
<span class="treeName">${name}</span>
</div>
${if(count)}
<div style="margin-right: 5px; float:right">
<span class="treeCount e-badge e-badge-primary">${count}</span>
</div>
${/if}
</div>
</div>
</script> .outlook-style #discard {
margin-left: 7px;
}
.outlook-style table {
width: 100%;
}
.outlook-style#target {
margin: 20px auto;
max-width: 820px;
}
.outlook-style td {
padding: 2px;
}
.control-section {
min-height: 370px;
}
.e-treeview .e-list-text {
width: 100%;
}
#groupedList.e-listview .e-list-group-item {
height: 0;
}
#splitter1 .settings.e-list-wrapper.e-list-multi-line.e-list-avatar {
padding: 15px;
}
#buttonSection {
padding: 7px;
}
.outlook-style #createpostholder {
padding-left: 3px;
padding-right: 4px;
}Once the above configurations has been completed, you will get the output like this.