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 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Splitter for Blazor
Declare the
<TelerikSplitter>tag-
Optionally, set the
WidthandHeightparameters to the desired values. Otherwise, the component size will be controlled by the content and size of the panes.- 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
Panes
Тhe Panes are the building blocks of the Splitter. Each Pane controls its own behaviors such as the ability to change its size and collapse. Read more about the Splitter Panes...
Size
You can control the Splitter size through its Width and Height parameters. Additionally, the component allows you specify the desired size for each pane. Read about for the Splitter sizing specifics...
Orientation
The Splitter Panes can be stacked in horizontal or vertical direction. Read more about how to configure the Splitter orientation...
State
The Splitter allows you to save its state and programmatically control it. Read more about the Splitter State...
Events
The Splitter generates events that you can handle to further customize the component behavior and respond to the user actions. Read more about the Blazor Menu events...
Splitter Parameters
The Blazor Splitter provides various parameters for its configuration. The following table lists Splitter parameters on component level. Explore the Splitter Panes article for details on the individual Panes configuration.
Check the Splitter API Reference for a full list of properties, methods and events.
| Attribute | Type and Default Value | Description |
|---|---|---|
Class |
string |
The CSS class that renders on the main wrapping element of the component. |
Height |
string |
The height of the Splitter. See the Dimensions article for more details on what units you can use and how dimensions in percent work. |
Orientation |
SplitterOrientation enum ( SplitterOrientation.Horizontal) |
Whether the content will be split up (how the panes will stack) horizontally or vertically. |
Width |
string |
The width of the Splitter. See the Dimensions article for more details on what units you can use and how dimensions in percent work. |
Splitter Reference and Methods
Add a reference to the component instance to use the Splitter methods.
| Method | Description |
|---|---|
GetState |
Gets the current state of the Splitter. |
SetState |
Sets the current state of the Splitter. |
<TelerikButton OnClick="@GetSplitterState">Get Splitter State</TelerikButton>
<TelerikSplitter @ref="@SplitterRef"
Width="400px"
Height="200px">
<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; }
void GetSplitterState()
{
var currState = SplitterRef.GetState();
}
}