Different layouts in Angular Splitter component

21 Sep 202222 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.

See Also