Splitter
The purpose of this component is to have two panels of arbitrary content in a horizontal or vertical layout. The user can drag the splitter to resize the panels.
Examples
Default
The default splitter has two panels with a 50% width and can work both in a horizontal as a vertical orientation. The
FluentSplitter has an OnSizeChanged EventCallback that can be used to connect an action to a resize event.
See the 'Razor' tab for the code
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Panel 2 - Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Nested splitters
Splitters can be nested to create more complex layouts.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Custom sizes for panels
Panel 1 size is set to 25%, no size is set for panel 2. Panel 2 size is therefore automatically set to 75%
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Panel 2
Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Panel 2 size is set to 25%, no size is set for panel 1. Panel 1 size is therefore automatically set to 75%
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Panel 2
Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Both panel 1 and panel 2 size are set to 25%. Because of the grid-template-row with a max-content value, the total width is set to 50% of the container width.
This sizing will be undone as soon as a resize of the splitter is underway. This can not be changed or adjusted because of the internal working of the splitter.
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Panel 2
Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
In this example panel 1 and panel 2 sizes are set proportionaly with fractions (CSS fr units)
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Panel 2
Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Collapse Splitter
The FluentSplitter component has a Collapsed parameter that can be set to hide the splitter bar
and the contents of Panel2. This can be useful for things like a Summary/Detail view where you don't always want the splitter
to be visible.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Hide the bar handle
You can hide the bar handle by setting ShowBarHandle to false.
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare quam viverra orci sagittis.
Panel 2 - Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus semper eget duis at.
Documentation
FluentSplitter Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
BarHandle | bool | True | Gets or sets a value indicating whether the splitter bar handle is visible. Default is true. |
BarSize | int | 8 | Gets or sets the size of the splitter bar in pixels. Default is 8. |
Collapsed | bool | False | Gets or sets a value indicating whether the splitter is collapsed. If set to true, Panel1 will take up all the space and Panel2 as well as the splitter bar will be hidden. |
Orientation | Orientation | Horizontal | Gets or sets the orientation. Default is horizontal (i.e a vertical splitter bar) |
Panel1 | RenderFragment? | Gets or sets the content for the top/left panel. | |
Panel1MinSize | string? | Gets or sets the minimum size for the left/top panel. Needs to be a valid css size like '50%' or '250px'. | |
Panel1Size | string? | Gets or sets the size for the left/top panel. Needs to be a valid css size like '50%' or '250px'. | |
Panel2 | RenderFragment? | Gets or sets the content for the bottom/right panel. | |
Panel2MinSize | string? | Gets or sets the minimum size for the right/bottom panel. Needs to be a valid css size like '50%' or '250px'. | |
Panel2Size | string? | Gets or sets the size for the right/bottom panel. Needs to be a valid css size like '50%' or '250px'. Uses grid-template-rows/columns with max-content to determine end width. See mdn web docs for more information |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnCollapsed | EventCallback<bool> | |
OnExpanded | EventCallback<bool> | |
OnResized | EventCallback<SplitterResizedEventArgs> |
SplitterResizedEventArgs Class
Properties
Name | Type | Default | Description |
|---|---|---|---|
Panel1Size | int | 0 | Gets the size of panel 1 (top/left) after a resize operation. |
Panel2Size | int | 0 | Gets the size of the panel 2 (bottom/right) after a resize operation. |