Splitter (Blazor)

This guide demonstrates how to use the Splitter component.

Splitter Properties

Name Type Default Description
Name string ‘splitter’ + index suffix Unique name of the splitter.
Orientation string ‘horizontal’ ‘horizontal’ or ‘vertical’.
Panes array of panes null Splitter panes.

For more info about expressions please visit expressions in our documentation.

Splitter Events

Name Type Default Description
Collapse event null Event argument with PaneIndex, Pane and Cancel as properties.
Expand event null Event argument with PaneIndex, Pane and Cancel as properties.
Resize event null Event argument with NewSize as property.

For more info about event actions please visit event actions in our documentation.

Blazor declaration

<RadzenSplitter Orientation="Orientation.Vertical" Collapse=@OnCollapse Expand=@OnExpand style="height: 400px; border: 1px solid #777777;">
    <RadzenSplitterPane Size="100px">
        <RadzenSplitter Collapse=@OnCollapse Expand=@OnExpand>
            <RadzenSplitterPane Size="50%" Min="30px" Max="70%">
                Pane A1
                <div style="font-size: 10px;">
                    50% Min 30px Max 70%
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane>
                Pane A2
            </RadzenSplitterPane>
        </RadzenSplitter>
    </RadzenSplitterPane>
    <RadzenSplitterPane Size="100px">
        <RadzenSplitter Collapse=@OnCollapse Expand=@OnExpand Resize=@OnResize>
            <RadzenSplitterPane Size="50px" Min="30px">
                Pane B1
                <div style="font-size: 10px;">
                    Size 50px Min 30px
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane>
                Pane B2
            </RadzenSplitterPane>
            <RadzenSplitterPane Resizable="false">
                Pane B3
                <div style="font-size: 10px;">
                    not resizable
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane Min="10%">
                Pane B4
                <div style="font-size: 10px;">
                    Min 10%
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane Collapsible="false">
                Pane B5
                <div style="font-size: 10px;">
                    not collapsible
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane Visible="false">
                Pane B6
            </RadzenSplitterPane>
            <RadzenSplitterPane Resizable="false">
                Pane B7
                <div style="font-size: 10px;">
                    not resizable
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane>
                Pane B8
            </RadzenSplitterPane>
        </RadzenSplitter>
    </RadzenSplitterPane>
    <RadzenSplitterPane>
        <RadzenSplitter Collapse=@OnCollapseDisabled Resize=@OnResizeDisabled>
            <RadzenSplitterPane>
                Pane C1
                <div style="font-size: 10px;">
                    collapse and resize programmatically disabled
                </div>
            </RadzenSplitterPane>
            <RadzenSplitterPane>
                Pane C2
                <div style="font-size: 10px;">
                    collapse and resize programmatically disabled
                </div>
            </RadzenSplitterPane>
        </RadzenSplitter>
    </RadzenSplitterPane>
</RadzenSplitter>

SplitterPane Properties

Name Type Default Description
Size string null Splitter pane size.
Min string null Splitter pane min.
Max string null Splitter pane max.
Collapsed boolean false Is splitter pane collapsed.
Collapsible boolean true Is splitter pane collapsible.
Resizable boolean true Is splitter pane resizable.

We are here for you

Making our users happy is always a priority for us.