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.

Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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.  

    Check out the Telerik UI for Blazor Splitter demo

    Telerik UI for Blazor Splitter - Overview
  • 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. 
    Blazor Splitter - Orientation
  • 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
    Telerik UI for Blazor Splitter - Resizing
  • 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. 
    Telerik UI for Blazor Splitter
  • 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. 
    Telerik UI for Bazor Keyboard Navigation

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.