SplitterPaneComponent

Represents the pane component of the Splitter.

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>

Selector

kendo-splitter-pane

Export Name

Accessible in templates as #kendoSplitterPaneInstance="kendoSplitterPane"

Inputs

Name	Type	Default	Description
collapsed	boolean	false	Determines if the pane is initially collapsed.
collapsible	boolean	false	Determines if you can hide the pane and provide space for other panes.
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	true	Determines if you can resize the pane and provide space for other panes.
scrollable	boolean	true	Determines if overflowing content is scrollable or hidden.
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

Name	Type	Description
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.