Orientation
The Splitter enables you to arrange its panes either horizontally or vertically.
To set the pane orientation, use the orientation property.
@Component({
selector: 'my-app',
template: `
<!-- Horizontal splitter -->
<kendo-splitter orientation="horizontal" style="height: 200px;">
<kendo-splitter-pane size="20%"> <h3>Left pane</h3> </kendo-splitter-pane>
<kendo-splitter-pane> <h3>Middle pane</h3> </kendo-splitter-pane>
<kendo-splitter-pane size="20%"> <h3>Right pane</h3> </kendo-splitter-pane>
</kendo-splitter>
<!-- Vertical splitter -->
<kendo-splitter orientation="vertical" style="height: 200px;">
<kendo-splitter-pane> <h3>Top pane</h3> </kendo-splitter-pane>
<kendo-splitter-pane> <h3>Bottom pane</h3> </kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
kendo-splitter + kendo-splitter { margin: 20px 0 0; }
h3 { font-size: 1.2em; padding: 10px; }
` ]
})
class AppComponent {}