Splitter

Splitter Overview

The Splitter component is a versatile UI element that allows users to dynamically resize and adjust adjacent panes in web or application interfaces. By dragging the split bars or using their collapse and expand functions, users can customize the size and visibility of the panes, focusing on the information that concerns them the most. Whether used as a high-level layout component or for specific tasks like image comparison, the Splitter enhances user experience by providing adaptable and interactive content organization.

Live Demo

Appearance

Splitters provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI Splitter, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the split bar of the Telerik and Kendo UI Splitter can acquire the following states which you can set by using the following classes:

• A split bar in its normal state appears usable and clickable.
• k-hover—The hover state of the split bar is triggered when the user moves the cursor over it.
• k-focus—The focus state is triggered after the split bar has been spotlighted with the mouse or the keyboard, meaning that the split bar is active and the user is interacting with it.
• k-disabled—The disabled state of the split bar indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

Anatomy

The anatomy of the Splitter summarizes the elements of the component and includes: 

1. Resizable pane
2. Resizable and collapsible pane
3. Split bar
4. Resize handle
5. Expand or collapse indicator

Variants

Depending on the panes' behavior, the split bar of Telerik and Kendo UI Splitter can be any of the following types:

• Resizable only
• Resizable and collapsible to the right
• Resizable and collapsible to the left
• Resizable and collapsible both to the right and left

1. Resizable only
2. Resizable and collapsible to the right
3. Resizable and collapsible to the left
4. Resizable and collapsible both to the right and left

Orientation

Depending on the orientation, the split bar of Telerik and Kendo UI Splitter can be any of the following types:

• Vertical
• Horizontal

1. Vertical splitbar
2. Horizontal splitbar

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular SplitterFind more information about the Kendo UI for Angular Splitter in the official product documentation of the component.

Telerik UI for Blazor SplitterFind more information about the Telerik UI for Blazor Splitter in the official product documentation of the component.

Kendo UI for jQuery SplitterFind more information about the Kendo UI for jQuery Splitter in the official product documentation of the component.

KendoReact SplitterFind more information about the KendoReact Splitter in the official product documentation of the component.

Kendo UI for Vue SplitterFind more information about the Kendo UI for Vue Splitter in the official product documentation of the component.

Telerik UI for ASP.NET Core SplitterFind more information about the Telerik UI for ASP.NET Core Splitter component.

Telerik UI for ASP.NET MVC SplitterFind more information about the Telerik UI for ASP.NET MVC Splitter component.