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 {}

Functionality and Features

In this article