Blazor Splitter - Overview

The Telerik UI for Blazor Splitter component splits the page into sections and allows the user to control the page layout. By dragging the split bars, using their collapse/expand buttons and double-clicking the split bars, you can adjust the size and visibility of the panes so you can see the information that interests you.

You can put any content in the splitter, such as plain HTML and other components, or even add more splitters so you can create complex layouts for users to resize and tailor.

A Splitter could act as a high-level component that holds or even creates the majority of the layout of your application, or it can be placed within a page to serve a specific purpose.

The Splitter and its panes can be customized in several ways. The control can be positioned horizontally or vertically. You can add a CSS class to both the Splitter and its panes to configure their default, minimum and maximum sizes and define if they can be resized and collapsed.

Three events are triggered by the component—OnResize, OnExpand and OnCollapse. Each event is fired when a pane of the splitter is resized, expanded or collapsed with the pane being passed as an argument. You can use them to store the Splitter state so when your user returns to the page, it would render just as they left it.