SplitView

This documentation provides a comprehensive reference for the SplitView component, guiding you through its configuration options.
Demos

Screenshot #

Blazor SplitView Component

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 divider color. 4.0.0
CustomColor string? null Gets or sets a custom divider color. 4.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
IsDisabled bool False Gets or sets a value indicating whether user interaction is disabled. 4.0.0
MinimumPaneSize double 0 Gets or sets the minimum pane size as a percentage. 4.0.0
Orientation SplitViewOrientation Horizontal Gets or sets the SplitView orientation. 4.0.0
Pane1 RenderFragment? null Gets or sets the first pane content. 4.0.0
Pane2 RenderFragment? null Gets or sets the second pane content. 4.0.0
PrimaryPaneSize double 50 Gets or sets the primary pane size as a percentage. 4.0.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> Fired while the divider is being dragged. 4.0.0
OnResizeEnded EventCallback<SplitViewResizeEventArgs> Fired when resizing ends. 4.0.0
OnResizeStarted EventCallback<SplitViewResizeEventArgs> Fired when resizing starts. 4.0.0
PrimaryPaneSizeChanged EventCallback<double> Fired when the primary pane size changes. 4.0.0

SplitViewResizeEventArgs Properties #

Name Type Default Required Description Added Version
Orientation SplitViewOrientation null
PrimaryPaneSize double null
SecondaryPaneSize double null

SplitViewColor Enum #

Name Value Description Added Version
None 0 Indicates that no explicit color option is selected. 4.0.0
Primary 1 Indicates the primary (emphasis) color option. 4.0.0
Secondary 2 Indicates the secondary (less emphasized) color option. 4.0.0
Success 3 Indicates a success-state color option. 4.0.0
Danger 4 Indicates an error or danger-state color option. 4.0.0
Warning 5 Indicates a warning-state color option. 4.0.0
Info 6 Indicates an informational-state color option. 4.0.0
Light 7 Indicates a light-toned color option. 4.0.0
Dark 8 Indicates a dark-toned color option. 4.0.0
Body 9 Indicates the body background color option. 4.0.0
BodySecondary 10 Indicates the secondary body background color option. 4.0.0
BodyTertiary 11 Indicates the tertiary body background color option. 4.0.0
Black 12 Indicates the black color option. 4.0.0
White 13 Indicates the white color option. 4.0.0
Transparent 14 Indicates a transparent color option. 4.0.0

SplitViewOrientation Enum #

Name Value Description Added Version
Horizontal 0 Arranges panes side by side with a vertical divider. 4.0.0
Vertical 1 Arranges panes top to bottom with a horizontal divider. 4.0.0

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.