Blazor Splitter Overview

The Blazor Splitter component lets you divide a portion of the page into several pieces that the user can resize and collapse. This provides real estate management for the app and the end user so they can focus on the content that is important in their current task. You can also save and load its state, and respond to events.

The Splitter component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Splitter

1. Add the <TelerikSplitter> tag.
2. Set the Width and Height parameters in any valid CSS unit. See Splitter Parameters for more information about the component behavior when dimensions are not set.
3. Inside the <SplitterPanes> child tag, add the desired <SplitterPane> tags to create sections of content.
4. Inside each <SplitterPane>, add the desired content as HTML markup or other components.
5. Configure the panes. For example, set their Size, Min, Max, Collapsible, and Resizable parameters. By default, Splitter panes are resizable, but not collapsible.

Basic Splitter

<TelerikSplitter Orientation="@SplitterOrientation.Horizontal"
                 Width="80%"
                 Height="200px">
    <SplitterPanes>

        <SplitterPane Size="100px" Min="50px" Max="150px" Collapsible="true">
            Left pane. Users can collapse it or resize it between 50px and 150px.
        </SplitterPane>

        <SplitterPane Collapsible="false">
            Middle pane, which cannot be collapsed.
        </SplitterPane>

        <SplitterPane Collapsed="true" Collapsible="true" Resizable="false" Size="100px">
            Right pane that is 100px wide and initially collapsed. Users cannot resize it.
        </SplitterPane>

    </SplitterPanes>
</TelerikSplitter>

The following sample app shows how to create a 100%-high page layout with a Splitter that includes a header, footer, and sidebar: How to make the Splitter take up 100% of the viewport.

Panes

Тhe Panes are the building blocks of the Splitter. Each pane controls its own behaviors such as the ability to change its size and collapse. Read more about the Splitter Panes...

Orientation

The Splitter panes can stack horizontally or vertically. Read more about how to configure the Splitter orientation...

State

The Splitter allows you to save its state and programmatically control it. Read more about the Splitter state...

Events

The Splitter fires events that you can handle to further customize the component behavior and respond to the user actions. Read more about the Blazor Splitter events...

Splitter Parameters

The Blazor Splitter provides various parameters for its configuration. The following table lists Splitter parameters on component level. Explore the Splitter Panes article for details on the individual Panes configuration.

Check the Splitter API Reference for a full list of properties, methods and events.

Parameter	Type	Description
AriaLabel	string	The aria-label attribute of the splitbars elements (<div class="k-splitbar">).
Class	string	The CSS class that renders on the Splitter element (<div class="k-splitter">).
Height	string	The height style of the Splitter. See the Dimensions article for details on what units you can use and how percentage dimensions work. If not set, the Splitter will shrink and expand, according to the pane sizes and content.
Orientation	SplitterOrientation enum (SplitterOrientation.Horizontal)	Whether the content will be split up (how the panes will stack) horizontally or vertically.
Width	string	The width style of the Splitter in any valid CSS unit. If not set, the Splitter will expand horizontally to 100%.

Splitter Reference and Methods

Add a reference to the component instance to use the Splitter methods.

Method	Description
GetState	Gets the current state of the Splitter.
SetState	Sets the current state of the Splitter.

<TelerikButton OnClick="@GetSplitterState">Get Splitter State</TelerikButton>

<TelerikSplitter @ref="@SplitterRef"
                 Height="200px">
    <SplitterPanes>
        <SplitterPane>
            <div>left sidebar</div>
        </SplitterPane>
        <SplitterPane>
            <div>right hand side pane - content.</div>
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

@code {
    private TelerikSplitter? SplitterRef { get; set; }

    private void GetSplitterState()
    {
        var splitterState = SplitterRef?.GetState();
    }
}

Next Steps

• Explore the Splitter pane settings
• Set the Splitter orientation
• Manage the Splitter state
• Handle Splitter events

See Also

• Live Demo: Splitter
• Splitter API Reference
• SplitterPane API Reference