SplitView
This documentation provides a comprehensive reference for the
SplitView component, guiding you through its configuration options.Screenshot #
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. | 4.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 4.0.0 | |
| Color | SplitViewColor | None | Gets or sets the Bootstrap contextual color used for the divider. | 4.0.0 | |
| CustomColor | string? | null | Gets or sets a custom CSS color used for the divider. When specified, it overrides the color supplied by Color. | 4.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 4.0.0 | |
| IsDisabled | bool | False | Gets or sets whether users can resize the panes. When true, the divider is displayed but cannot be dragged. | 4.0.0 | |
| MinimumPaneSize | double | 0 | Gets or sets the minimum allowed size of each pane as a percentage. Values are constrained to the range 0 through 50. | 4.0.0 | |
| Orientation | SplitViewOrientation | Horizontal | Gets or sets whether panes are arranged side by side or stacked. The orientation also determines the divider drag direction. | 4.0.0 | |
| Pane1 | RenderFragment? | null | Gets or sets the content rendered in the primary pane, before the divider. | 4.0.0 | |
| Pane2 | RenderFragment? | null | Gets or sets the content rendered in the secondary pane, after the divider. | 4.0.0 | |
| PrimaryPaneSize | double | 50 | Gets or sets the primary-pane size as a percentage. The value is constrained so both panes satisfy MinimumPaneSize. | 4.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 4.0.0 |
Events #
| Name | Return Type | Description | Added Version |
|---|---|---|---|
| OnResized | EventCallback<SplitViewResizeEventArgs> | Fires while the divider is dragged and supplies the current size of both panes. | 4.0.0 |
| OnResizeEnded | EventCallback<SplitViewResizeEventArgs> | Fires after the user releases the divider and supplies the final size of both panes. | 4.0.0 |
| OnResizeStarted | EventCallback<SplitViewResizeEventArgs> | Fires when the user starts dragging the divider and supplies the initial size of both panes. | 4.0.0 |
| PrimaryPaneSizeChanged | EventCallback<double> | Fires whenever dragging changes the primary-pane size and supports two-way binding with PrimaryPaneSize. | 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 |
