All Components

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

Features

The Splitter delivers the following features:

In this article