Splitter (Blazor)
This article demonstrates how to use the Splitter component. Check also the component guide and API reference.
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. |