MultiSplitter
The MultiSplitter splits the page into multiple sections and allows the user to control the page layout.
You can include as many Panes as you like in a container.
By default, panes are resizable, but the Resizable property can be used to block this functionality.
The initial Size is in percent or pixels and has a Min and Max value.
A Panel can be fully collapsed by setting the Collapsible property to True.
These CSS variables are predefined with these values, but can be overwritten (using Style property)
.fluent-multi-splitter {
/* Resize Icon colors */
--fluent-multi-splitter-color: var(--neutral-stroke-strong-rest);
--fluent-multi-splitter-color-active: var(--neutral-stroke-strong-hover);
/* Bar colors */
--fluent-multi-splitter-background-color: var(--neutral-stroke-rest);
--fluent-multi-splitter-background-color-active: var(--neutral-stroke-hover);
--fluent-multi-splitter-hover-opacity: 0.8;
/* Bar size */
--fluent-multi-splitter-bar-size: 8px;
}
Why have we created this new component when FluentSplitter already exists?
We want to generalize this component by making it easier to have several (>2) panels per container. We've also used CSS variables to simplify the customization of colors and sizes.
Examples
Default
Documentation
FluentMultiSplitter Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
BarSize | string? | Gets or sets the size of the splitter bar in pixels. Default is 8 | |
ChildContent | RenderFragment? | Gets or sets the child content. | |
Height | string? | Gets or sets the height of the container. | |
Orientation | Orientation | Horizontal | Gets or sets the orientation. |
Width | string? | Gets or sets the width of the container. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnCollapse | EventCallback<FluentMultiSplitterEventArgs> | Gets or sets the collapse callback. |
OnExpand | EventCallback<FluentMultiSplitterEventArgs> | Gets or sets the expand callback. |
OnResize | EventCallback<FluentMultiSplitterResizeEventArgs> | Gets or sets the resize callback. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
AddPane | FluentMultiSplitterPane pane | void | Adds the pane. |
OnPaneResizedAsync | int paneIndex double sizeNew int? paneNextIndex double? sizeNextNew | Task | Called when pane resized (internal method). |
Refresh | void | Refreshes this instance. | |
RemovePane | FluentMultiSplitterPane pane | void | Removes the pane. |
FluentMultiSplitterPane Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the child content. | |
Collapsed | bool | False | Gets or sets a value indicating whether this FluentMultiSplitterPane is collapsed. |
Collapsible | bool | False | Gets or sets a value indicating whether this FluentMultiSplitterPane is collapsible. |
Max | string | Determines the maximum value. | |
Min | string | Determines the minimum value. | |
Resizable | bool | True | Gets or sets a value indicating whether this FluentMultiSplitterPane is resizable. |
Size | string | Gets or sets the size. | |
Splitter | FluentMultiSplitter | Gets or sets the splitter. |