Progress Telerik UI for Blazor
Splitter
- The Blazor Splitter component separates a page into sections and allows users to control its layout—pane sizes and visibility—through intuitive drag and dropping.
- This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
- The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
-
Blazor Splitter Overview
The Telerik UI for Blazor Splitter is a layout component whose main goal is to let users control the size of several subcomponents known as panes. Panes can be resized to the user’s preference and collapsed to free maximum screen space.
-
Customization
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.
-
Splitter Events
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.
Learn more about the Blazor Splitter Events in our documentation
-
Nested Splitters
In more complex scenarios, you might want to nest several splitters into one another. You can place a horizontal splitter inside a vertical one or vice versa to help users resize panes in multiple directions. This functionality is well-supported by the component and an example is available in our documentation. -
State
Providing a good user experience makes it mandatory for the Splitter to remember its state so the next time the user opens the web application, the same panes are displayed in their appropriate dimensions. For this reason, the Splitter’s state can be programmatically saved, restored and modified.
See how to configure the Splitter State -
Theming
The Splitter component has 20+ built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
-
Keyboard Navigation
The Splitter component allows users to navigatepanes by using a keyboard only. Whether your application’s audience consists of avid keyboard users or prefers the old-school mouse approach, they would all enjoy using the control.
Next Steps
Launch demos
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Download free trial
Try Telerik UI for Blazor with dedicated technical support.