Blazor Splitter Overview
The Blazor Splitter component lets you divide a portion of the page into several pieces that the user can resize and collapse. This provides real estate management for the app and the end user so they can focus on the content that is important in their current task. You can also save and load its state, and respond to events.
The Splitter component is part of Telerik UI for Blazor, a
professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In This Article
Basics
To use a Telerik Splitter for Blazor
-
Declare the
<TelerikSplitter>
tag and set itsWidth
andHeight
parameters to the desired values.- You can use values in percent (setting them to
100%
is very common) so that the splitter will take up the entire size of its container. See the Dimensions article for more details on what units you can use and how dimensions in percent work.
- You can use values in percent (setting them to
Inside the
<SplitterPanes>
child tag, add the desired<SplitterPane>
tags to create the sections of content.Inside each
<SplitterPane>
, add the desired content - be that HTML or components.Optionally, set the desired settings for the individual panes - such as initial, min and max size, whether the user can collapse and resize the pane.
Splitter that takes 100% of its container and shows the main features of its panes
This example shows how the splitter can fill up the entire container (marked with a red border) and the main features of the component and its panes.
<div style="width: 500px; height: 300px; border: 1px solid red;">
<TelerikSplitter Width="100%" Height="100%" Orientation="@SplitterOrientation.Horizontal">
<SplitterPanes>
<SplitterPane Size="100px" Min="50px" Max="150px" Collapsible="true">
<div>left sidebar. Can be collapsed and can be resized between 50px and 150px.</div>
</SplitterPane>
<SplitterPane Collapsible="false">
<div>right hand side pane - content. You cannot collapse this pane so it is always visible.</div>
</SplitterPane>
<SplitterPane Collapsed="true" Collapsible="true" Resizable="false" Size="100px">
<div>Third pane that is initially collapsed and is not resizable.</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
Splitter functionality in action
Component namespace and reference
<TelerikSplitter Width="400px" Height="200px" @ref="@SplitterRef">
<SplitterPanes>
<SplitterPane>
<div>left sidebar</div>
</SplitterPane>
<SplitterPane>
<div>right hand side pane - content.</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
@code {
Telerik.Blazor.Components.TelerikSplitter SplitterRef { get; set; }
}
Features
The main container is the Splitter component and its tag defines the size and layout direction of the individual sections. Each Pane (section) controls its own behaviors such as the ability to change its size and collapse.
Splitter
The main tag of the splitter offers the following core features of the component:
Class
- the CSS class that renders on the main wrapping element of the component.Height
- takes a CSS unit that determines how tall the splitter is. See the Dimensions article for more details on what units you can use and how dimensions in percent work.Orientation
- whether the content will be split up (how the panes will stack) horizontally or vertically. Takes a member of theSplitterOrientation
enum and defaults toHorizontal
.Width
- takes a CSS unit that determines how wide the splitter is. See the Dimensions article for more details on what units you can use and how dimensions in percent work.Several events.
Pane
Each individual splitter pane (section) offers the following features:
ChildContent
- the standardRenderFragment
for Blazor that lets you define your content directly between the opening and closing tags of the pane.Class
- the CSS class that renders on the top element of the pane. Lets you apply styling such as changing theoverflow
for the content.Collapsed
- whether the pane will be collapsed (not visible). Defaults tofalse
. Supports two-way binding.Collapsible
- whether the user can collapse (hide) the pane to provide more room for other panes. When enabled, the adjacent splitbar (the drag handle between the panes) will offer a collapse button for the pane. Defaults tofalse
.Max
- the maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further.Min
- the minimum size the pane can have in pixels or percentages. When it is reached, the user cannot reduce its size further.Resizable
- whether the user can resize the pane by dragging the resize handle (splitbar) between two panes. Resizing means that the adjacent pane will take up the difference in size. Defaults totrue
.Size
- the size the pane in pixels or percentages. Must be betweenMin
andMax
. Supports two-way binding.
Splitter and Pane Size
The splitter respects the dimensions you set to its Width
and Height
parameters, and distributes the available space according to the Size
set to individual panes inside.
If you set the Width
and Height
in percent, make sure that the parent element provides the desires dimensions and layout first.
The individual panes use the CSS flex-basis to set their dimensions and by default they have flex: 1 1 auto
so they distribute the space evenly if there are no other settings.
If the Size
of a pane is set to a value larger than the Max
, the pane cannot be resized even if its Resizable
parameter is set to true
.
You must leave at least one
SplitterPane
without a setSize
. This pane will absorb size changes from other panes when the user resizes them and provides you with some flexibility when defining strict sizes for the other panes so that you don't have to keep track of all the pane sizes, their sum and the container size.
You can find a sample of creating a 100% height layout with a splitter that also offers a header, footer and sidebar in the following sample project: How to make Splitter take 100% height of the viewport.
Nested Splitters
Sometimes you need to create a more complex layout that includes both horizontal and vertical panes. To do that, you can nest Telerik Splitter components inside the panes of other splitters. When you do that, set the Class
parameter of the nested splitter to k-pane-flex
.
Nested splitters that create a complex layout with both horizontal and vertical panes
<div style="width: 500px; height: 300px; border: 2px solid red;">
<TelerikSplitter Width="100%" Height="100%">
<SplitterPanes>
<SplitterPane Size="100px">
<div>left sidebar</div>
</SplitterPane>
<SplitterPane>
<TelerikSplitter Class="k-pane-flex"
Width="100%" Height="100%"
Orientation="@SplitterOrientation.Vertical">
<SplitterPanes>
<SplitterPane Size="20%">
<div>TOP content</div>
</SplitterPane>
<SplitterPane>
<div>Bottom content</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
</div>
The result from the code snippet above