New to Kendo UI for Angular? Start a free 30-day trial

SplitterComponent

Component

Represents the Kendo UI Splitter component for Angular.

Definition

Package:@progress/kendo-angular-layout

Selector:kendo-splitter

Export Name:Accessible in templates as #kendoSplitterInstance="kendoSplitter"

Syntax:

html

<kendo-splitter [style.height.px]="280">
  <kendo-splitter-pane [collapsible]="true" size="30%">
    <h3>Left pane</h3>
  </kendo-splitter-pane>
  <kendo-splitter-pane>
    <h3>Right pane</h3>
  </kendo-splitter-pane>
</kendo-splitter>

Inputs

orientation

Orientation

Defines the orientation of the panes within the Splitter. Use horizontal to place panes horizontally or vertical to place them vertically.

Default:

'horizontal'

resizeStep

number

Defines the distance in pixels that you move the separator during keyboard navigation.

Default:

splitbarWidth

number

Defines the width or height of the Splitter splitbars in pixels. The dimension depends on the orientation of the Splitter.

splitterBarClass

string | object | string[]

Defines the CSS classes that are rendered on the splitter bars. Supports the same values as ngClass.

Events

layoutChange

EventEmitter<string>

Fires when the layout of the Splitter changes. Use this event to trigger layout calculations on components that are positioned inside the panes.