Getting Started with Kendo UI for Angular Splitter
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 {}