Panes
The Splitter provides options for setting the behavior of its panes.
By using these options, you can configure the following pane features:
Dimensions
The size property controls the dimensions of the Splitter panes. It accepts units in both pixel and percentage values. To control the minimum and maximum size of a pane, use the min and max properties of the SplitterPane component.
Specifying the Dimensions
To allow the Splitter to fully and evenly distribute the available space between panes of non-declared size, do not specify the size of at least one pane. Otherwise, if you declare size for all panes, the Splitter will throw an error in development mode.
@Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane size="200px" min="5%">
<h3>Left pane</h3>
<p>Minimum size of 5%</p>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Middle pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane size="20%">
<h3>Right pane</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
h3 { font-size: 1.2em; padding: 10px; }
p { margin: 0; padding: 0 10px; }
` ]
})
class AppComponent {}Persisting the Size
To persist the pane size, use a two-way binding on the size property and persist its value.
@Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane [(size)]="sidebarSize" min="5%">
<h3>Sidebar</h3>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Main pane</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
h3 { font-size: 1.2em; padding: 10px; }
` ]
})
class AppComponent {
private _sidebarSize: string = localStorage.getItem('sidebarSize') || '20%';
public get sidebarSize(): string {
return this._sidebarSize;
}
public set sidebarSize(newSize: string) {
this._sidebarSize = newSize;
localStorage.setItem('sidebarSize', newSize);
}
}Resizing
By default, the Splitter enables the user to resize its panes. To disable this behavior, set the resizable property to false.
@Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane>
<h3>Left pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Center pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane [resizable]="false">
<h3>Right pane</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ ` h3 { font-size: 1.2em; padding: 10px; } ` ]
})
class AppComponent {}Collapsing
You can enable a Splitter pane to collapse by setting the collapsible property to true. As a result, the Splitter renders a button which shows or, respectively, hides the pane. To collapse a pane, you can also double-click the split-bar. To render a pane that is initially collapsed, use the collapsed property.
@Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane [collapsible]="true" size="20%">
<h3>Sidebar content</h3>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Main content</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ ` h3 { font-size: 1.2em; padding: 10px; } ` ]
})
class AppComponent {}Scrolling
By default, the content of the Splitter panes is scrollable. To disable the scrolling feature, set the scrollable property to false.
@Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane [scrollable]="false" size="20%">
<h3>Non-scrollable content</h3>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Main content</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ ` h3 { font-size: 1.2em; padding: 10px; } ` ]
})
class AppComponent {}