Telerik UI for ASP.NET Core Splitter Basic Usage
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
CLIENT-SIDE API SERVER-SIDE APIThe Splitter component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Telerik UI for ASP.NET Core Splitter provides a dynamic layout of collapsible and resizable panes. The Splitter can display any content, such as plain HTML, other UI components, remote data, or even nested Splitters, which allows you to create complex layouts for users to resize and tailor.
The ASP.NET Core Splitter component comes with combined vertical and horizontal orientation options, auto-resizing, and size-persisting. You can configure each pane size, visibility, and content to see the information that you require.
This demo illustrates how to split the page into sections by using nested Splitters with different orientations and multiple panes.
The ASP.NET Core Splitter control is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The Splitter is a server-side wrapper for the Kendo UI for jQuery Splitter component and supports an HtmlHelper and a TagHelper mode.
Functionality and Features
- Auto-resizing to a Window—When the Splitter is displayed inside a resizable Window, you can configure it to resize automatically along with the Window component.
- Auto-resizing to the content—Expand the Splitter based on the content inside a pane.
- Auto-resizing the height—Expand the Splitter component vertically and resize it within the browser window.
- Persisting the pane size—Keep the Splitter pane size in percentage upon user resizing.
- Vertical and Horizontal orientation—Place the Splitter panes in a horizontal or vertical order.
- Content—The Splitter enables you to render static and asynchronous content.
- Events—Handle the available Splitter events to track the user interaction with the panes.
- API—Use the API methods to control and change the Splitter options dynamically.
- Accessibility and keyboard navigation—The Splitter is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
- RTL support—The Splitter enables you to render its content in a right-to-left direction.