Splitter Panes

The Splitter consists of individual sections called Panes. The Splitter Panes allow you to add any desired content - be that simple text, other components or HTML elements. Declare a <SplitterPane> instance inside the <SplitterPanes> child tag of the Splitter for each Pane you want to include in the component.

Each Splitter Pane (section) is individually configured and offers the following features:

Attribute	Type and Default Value	Description
ChildContent	RenderFragment	The standard RenderFragment for Blazor that lets you define your content directly between the opening and closing tags of the pane.
Class	string	The CSS class that renders on the <div class="k-pane"> element of the pane. Lets you apply styling such as changing the overflow for the content.
Collapsed	bool	Whether the pane content will be collapsed (not visible). Supports two-way binding.
Collapsible	bool	Whether the user can collapse (hide) the pane to provide more room for other panes. When enabled, the adjacent splitbar (the drag handle between the panes) will offer a collapse button for the pane.
Max	string	The maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further.
Min	string	The minimum size the pane can have in pixels or percentages. When it is reached, the user cannot reduce its size further.
Resizable	bool (true)	Whether the user can resize the pane by dragging the resize handle (splitbar) between two panes. Resizing means that the adjacent pane will take up the difference in size.
Size	string	The size the pane in pixels or percentages. Must be between Min and Max. Supports two-way binding.
Visible	bool	Controls the visibility of the pane. When toggled at runtime, the pane's order remains unchanged, unlike adding a pane with a conditional statement, which appends it to the end. This is different from the Collapsed parameter, which manages content visibility and keeps action buttons (expand, collapse, resize) always visible.

@*Configure the Splitter Panes*@

<TelerikSplitter Width="600px" Height="400px">
    <SplitterPanes>

        <SplitterPane Collapsible="true" Size="200px" Min="100px" Max="300px">
            <h4>Left Pane</h4>
            <div>Collapsible pane with initial size in px that can be resized between 100px and 200px.</div>
        </SplitterPane>

        <SplitterPane Collapsible="true" Size="20%">
            <h4>Middle Pane</h4>
            <div>Collapsible pane with initial size in percent.</div>
        </SplitterPane>

        <SplitterPane Collapsible="false" >
            <h4>Right Pane</h4>
            <span>Non-collapsible pane. No size set, it will take the remaining space of the component.</span>
        </SplitterPane>

        <SplitterPane Visible="false" >
            <h4>Not Visible Pane</h4>
            <span>This pane is not displayed.</span>
        </SplitterPane>

    </SplitterPanes>
</TelerikSplitter>

See Also

• Live Demo: Splitter
• Splitter and Panes Size