New to Kendo UI for Angular? Start a free 30-day trial
SplitterComponent
Represents the Kendo UI Splitter component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-splitter [style.height.px]="280">
<kendo-splitter-pane [collapsible]="true" size="30%">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Inner splitter / center pane</h3>
<p>Resizable only.</p>
</kendo-splitter-pane>
<kendo-splitter-pane [collapsible]="true" size="30%">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
h3 { font-size: 1.2em; }
h3, p { margin: 10px; padding: 0; }
` ]
})
class AppComponent {}Selector
kendo-splitter
Export Name
Accessible in templates as #kendoSplitterInstance="kendoSplitter"
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
orientation |
|
Specifies the orientation of the panes within the Splitter. Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically. | |
resizeStep |
|
|
The distance in pixels that the separator is moved with during keyboard navigation. |
Events
| Name | Type | Description |
|---|---|---|
layoutChange |
|
Fires after a Splitter pane is resized or collapsed. Useful for triggering layout calculations on components which are positioned inside the panes. |
