All Components

Components / Layout / Splitter

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 {}
In this article