Splitter Overview
The Splitter splits the page into sections and allows the user to control the page layout.
Basic Usage
The following example demonstrates the Splitter in action.
@Component({
selector: 'my-app',
template: `
<kendo-splitter orientation="vertical" style="height: 340px;">
<kendo-splitter-pane>
<kendo-splitter>
<kendo-splitter-pane [collapsible]="true" size="30%">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane>
<div class="pane-content">
<h3>Inner splitter / center pane</h3>
<p>Resizable only.</p>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane [collapsible]="true" size="30%">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</kendo-splitter-pane>
</kendo-splitter>
</kendo-splitter-pane>
<kendo-splitter-pane size="100px">
<div class="pane-content">
<h3>Outer splitter / Middle pane</h3>
<p>Resizable only.</p>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane [resizable]="false" size="100px">
<div class="pane-content">
<h3>Outer splitter / Bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
.pane-content { padding: 0 10px; }
h3 { font-size: 1.2em; margin: 10px 0; padding: 0; }
p { margin: 0; padding: 0; }
` ]
})
class AppComponent {}