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

SplitterPaneComponent

Component

Represents the pane component of the Splitter.

Definition

Package:@progress/kendo-angular-layout

Selector:kendo-splitter-pane

Export Name:Accessible in templates as #kendoSplitterPaneInstance="kendoSplitterPane"

Syntax:

html

<kendo-splitter>
  <kendo-splitter-pane size="30%" [collapsible]="true">
    Left pane content
  </kendo-splitter-pane>
  <kendo-splitter-pane>
    Right pane content
  </kendo-splitter-pane>
</kendo-splitter>

Inputs

collapsed

boolean

Determines if the pane is initially collapsed.

Default:

false

collapsible

boolean

Determines if you can hide the pane and provide space for other panes.

Default:

false

max

string

Defines the maximum possible size of the pane. Accepts values in pixels and percentages.

min

string

Defines the minimum possible size of the pane. Accepts values in pixels and percentages.

resizable

boolean

Determines if you can resize the pane and provide space for other panes.

Default:

true

scrollable

boolean

Determines if overflowing content is scrollable or hidden.

Default:

true

size

string

Defines the initial size of the pane. Accepts values in pixels and percentages. The value must be between the min and max properties.

splitterBarAttributes

{ [key: string]: string }

Defines the HTML attributes of the splitter bar. Accepts string key-value pairs. You cannot change attributes that are essential for certain functionalities.

splitterBarClass

string | object | string[]

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

Events

collapsedChange

EventEmitter<boolean>

Fires when the Splitter pane collapses or expands. The event data contains the new property state. Enables two-way binding of the collapsed pane property.

sizeChange

EventEmitter<string>

Fires when the Splitter pane size changes. The event data contains the new pane size. Enables two-way binding of the pane size property.