HelpBot Assistant

How can I help you?

Pane content in Vue Splitter component

5 Mar 202620 minutes to read

This section explains how to provide plain text, HTML markup, or other JavaScript UI components as pane content in the Splitter.

HTML Markup

The Splitter is a layout container component. Render pane content from existing HTML markup. Converting HTML markup into Splitter panes makes it easy to add pane content dynamically.

<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='600px' height='200px'>
            <e-panes>
                <e-pane :content='content1' size='200px'></e-pane>
                <e-pane :content='content2' size='200px'></e-pane>
                <e-pane :content='content3' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>
    </div>
</template>
<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
import { createApp } from 'vue';


var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content"><h3 class="h3">PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...</div>`,
    data() {
        return {
            data: {}
        };
    }
});

var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>`,
    data() {
        return {
            data: {}
        };
    }
});

var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content"><h3 class="h3">GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.</div>`,
    data() {
        return {
            data: {}
        };
    }
});

const content1 = () => {
    return { template: contentVue1 }
};
const content2 = () => {
    return { template: contentVue2 }
};
const content3 = () => {
    return { template: contentVue3 }
}

</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    margin: 65px auto;
}

.content {
    padding: 10px;
}

.e-splitter {
    margin: 0 auto;
}
</style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='splitter' ref='splitterObj' width='600px' height='200px'>
        <e-panes>
          <e-pane :content='content1' size='200px'></e-pane>
          <e-pane :content='content2' size='200px'></e-pane>
          <e-pane :content='content3' size='200px'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  <script>
  
  import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';
  import { createApp } from 'vue';
  
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content"><h3 class="h3">PARIS </h3>Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...</div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content"><h3 class="h3">GRENOBLE </h3>The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.</div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  export default {
    name: "App",
    components: {
      "ejs-splitter": SplitterComponent,
      "e-panes": PanesDirective,
      "e-pane": PaneDirective
    },
    data() {
      return {
        content1: function () {
          return { template: contentVue1 }
        },
        content2: function () {
          return { template: contentVue2 }
        },
        content3: function () {
          return { template: contentVue3 }
        }
      }
    }
  }
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  #app {
    margin: 65px auto;
  }
  
  .content {
    padding: 10px;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>

JavaScript UI components

Any JavaScript UI component, along with its native and control events, can be rendered inside a Splitter pane.

Refer Accordion within splitter and Listview within splitter examples.

Plain content

Add plain text as pane content using inner HTML or the content API

<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='600px' height='200px'>
            <e-panes>
                <e-pane content='Left Pane' size='200px'></e-pane>
                <e-pane content='Middle Pane' size='200px'></e-pane>
                <e-pane content='Right Pane' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>
    </div>
</template>
<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';

</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    text-align: center;
    margin: 65px auto;
}

.content {
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 9px;
}

.e-splitter {
    margin: 0 auto;
}

.e-pane {
    text-align: center;
    align-items: center;
    display: grid;
}
</style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='600px' height='200px'>
            <e-panes>
                <e-pane content='Left Pane' size='200px'></e-pane>
                <e-pane content='Middle Pane' size='200px'></e-pane>
                <e-pane content='Right Pane' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>
    </div>
</template>
<script>

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';


export default {
    name: "App",
    components: {
        "ejs-splitter": SplitterComponent,
        "e-panes": PanesDirective,
        "e-pane": PaneDirective
    },
    data() {
        return {}
    }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    text-align: center;
    margin: 65px auto;
}

.content {
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 9px;
}

.e-splitter {
    margin: 0 auto;
}

.e-pane {
    text-align: center;
    align-items: center;
    display: grid;
}
</style>

Pane content using selector

Set an HTML element as pane content using query selectors such as an ID or CSS class selectors.

The following code demonstrates how to fetch an element from the document and load it to pane using its ID.

<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='600px' height='200px'>
            <e-panes>
                <e-pane content='#left-pane-content' min='60px' size='200px'></e-pane>
                <e-pane content='#middle-pane-content' min='60px' size='200px'></e-pane>
                <e-pane content='#last-pane-content' min='60px' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>

        <!-- pane contents -->
        <div id="left-pane-content" style="display: none;">
            <div>Left pane<div id='panetext'>size: 25%</div>
                <div id='panetext'>min: 60px</div>
            </div>
        </div>

        <div id="middle-pane-content" style="display: none;">
            <span>Middle pane<div id="panetext">size: 50%</div>
                <div id="panetext">min: 60px</div>
            </span>
        </div>

        <div id="last-pane-content" style="display: none;">
            <span>Right pane<div id="panetext">size: 25%</div>
                <div id="panetext">min: 60px</div>
            </span>
        </div>
    </div>
</template>
<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';

</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    text-align: center;
    margin: 65px auto;
}

.content {
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 9px;
}

.e-splitter {
    margin: 0 auto;
}

.e-pane {
    text-align: center;
    align-items: center;
    display: grid;
}
</style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='600px' height='200px'>
            <e-panes>
                <e-pane content='#left-pane-content' min='60px' size='200px'></e-pane>
                <e-pane content='#middle-pane-content' min='60px' size='200px'></e-pane>
                <e-pane content='#last-pane-content' min='60px' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>

        <!-- pane contents -->
        <div id="left-pane-content" style="display: none;">
            <div>Left pane<div id='panetext'>size: 25%</div>
                <div id='panetext'>min: 60px</div>
            </div>
        </div>

        <div id="middle-pane-content" style="display: none;">
            <span>Middle pane<div id="panetext">size: 50%</div>
                <div id="panetext">min: 60px</div>
            </span>
        </div>

        <div id="last-pane-content" style="display: none;">
            <span>Right pane<div id="panetext">size: 25%</div>
                <div id="panetext">min: 60px</div>
            </span>
        </div>
    </div>
</template>
<script>

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';


export default {
    name: "App",
    components: {
        "ejs-splitter": SplitterComponent,
        "e-panes": PanesDirective,
        "e-pane": PaneDirective
    },
    data() {
        return {}
    }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    text-align: center;
    margin: 65px auto;
}

.content {
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 9px;
}

.e-splitter {
    margin: 0 auto;
}

.e-pane {
    text-align: center;
    align-items: center;
    display: grid;
}
</style>