# Splitter

The Blazor Splitter divides an area into resizable, collapsible panes, horizontally or vertically.

Keywords: splitter, layout

> API reference: [RadzenSplitter API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenSplitter.md)

## Examples

## Blazor Splitter

The Blazor Splitter divides an area into resizable, collapsible panes, horizontally or vertically.

```razor
<RadzenSplitter Orientation="Orientation.Vertical" Collapse=@OnCollapse Expand=@OnExpand style="height: 400px; border: 1px solid rgba(0,0,0,.08);">
    <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>

<EventConsole @ref=@console/>

@code {
    EventConsole console;

    void OnCollapse(RadzenSplitterEventArgs args)
    {
        console.Log($"Pane {args.PaneIndex} Collapse");
    }

    void OnExpand(RadzenSplitterEventArgs args)
    {
        console.Log($"Pane {args.PaneIndex} Expand");
    }

    void OnResize(RadzenSplitterResizeEventArgs args)
    {
        console.Log($"Pane {args.PaneIndex} Resize (New size {args.NewSize})");
    }

    void OnCollapseDisabled(RadzenSplitterEventArgs args)
    {
        args.Cancel = true;
        console.Log($"Pane {args.PaneIndex} Collapse programmatically disabled");
    }

    void OnResizeDisabled(RadzenSplitterResizeEventArgs args)
    {
        args.Cancel = true;
        console.Log($"Pane {args.PaneIndex} Resize (New size {args.NewSize}) programmatically disabled");
    }

}
```