SplitView
This documentation provides a comprehensive reference for the SplitView component, including pane sizing, Bulma semantic divider colors, disabling drag, orientation, and resize events.
Preview #
Files
- Components
- Pages
- wwwroot
- Program.cs
Preview
A SplitView keeps two related surfaces visible while letting users resize the working area between them.
Use it for navigation and detail views, editors and previews, logs and dashboards, or nested workspace layouts.
Notes #
- The parent container should provide an explicit height so the SplitView has space to fill and resize.
- The divider supports mouse, touch, and pen dragging, so the same layout can be resized on desktop and mobile devices.
- While dragging, pane child content temporarily ignores pointer events to keep the divider interaction responsive.
Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object> | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Color | SplitViewColor | None | Gets or sets the Bulma semantic color used for divider state defaults. | 1.2.0 | |
| DividerBackgroundColor | string | null | Gets or sets the divider background color. | 1.2.0 | |
| DividerDraggingBackgroundColor | string | null | Gets or sets the divider dragging background color. | 1.2.0 | |
| DividerHoverBackgroundColor | string | null | Gets or sets the divider hover background color. | 1.2.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| IsDisabled | bool | False | If true, dragging is disabled. | 1.2.0 | |
| MinimumPaneSize | double | 10 | Gets or sets the minimum size, in percentage, that either pane can occupy. | 1.2.0 | |
| Orientation | SplitViewOrientation | Horizontal | Gets or sets the split orientation. | 1.2.0 | |
| Pane1 | RenderFragment | null | Gets or sets the first pane content. | 1.2.0 | |
| Pane2 | RenderFragment | null | Gets or sets the second pane content. | 1.2.0 | |
| PrimaryPaneSize | double | 50 | Gets or sets the first pane size, in percentage. | 1.2.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 |
Events #
| Name | Return Type | Description | Added Version |
|---|---|---|---|
| OnResized | EventCallback<SplitViewResizeEventArgs> | This event fires while the divider is being dragged. | 1.2.0 |
| OnResizeEnded | EventCallback<SplitViewResizeEventArgs> | This event fires when a drag resize operation ends. | 1.2.0 |
| OnResizeStarted | EventCallback<SplitViewResizeEventArgs> | This event fires when a drag resize operation starts. | 1.2.0 |
| PrimaryPaneSizeChanged | EventCallback<double> | This event fires when the first pane size changes. | 1.2.0 |