All Components

Keyboard Navigation

The keyboard navigation of the Splitter is always available.

The Splitter supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Moves up the split-bar in a vertical Splitter.
Down Arrow Moves down a split-bar in a vertical Splitter.
Left Arrow Moves left a split-bar in a horizontal Splitter.
Right Arrow Moves right a split-bar in a horizontal Splitter.
Enter Toggles the collapsed state of the nearest collapsible pane.
@Component({
  selector: 'my-app',
  template: `
        <kendo-splitter orientation="horizontal" style="height: 100px;">
            <kendo-splitter-pane [collapsible]="true" size="100px" min="20px" max="200px">
                Left Pane
            </kendo-splitter-pane>

            <kendo-splitter-pane>
                Right Pane
            </kendo-splitter-pane>
        </kendo-splitter>

        <kendo-splitter orientation="vertical" style="height: 150px;">
            <kendo-splitter-pane [collapsible]="true" size="60px" min="40px" max="100px">
                Top Pane
            </kendo-splitter-pane>

            <kendo-splitter-pane>
                Bottom Pane
            </kendo-splitter-pane>
        </kendo-splitter>
    `,
    styles: [`
        kendo-splitter { margin: 0 0 30px; }
        kendo-splitter + kendo-splitter { margin: 30px 0 0; }
        kendo-splitter-pane { padding: 16px; }
    `]
})
class AppComponent {}
In this article