Skip to content

SplitView component #1283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gvreddy04 merged 4 commits into from
May 13, 2026
Merged

SplitView component #1283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38ec45d
Add SplitView component with customizable features and documentation
gvreddy04 May 13, 2026
728eab0
Enhance SplitView component to handle parameter changes more effectively
gvreddy04 May 13, 2026
cb42f64
Remove unnecessary padding classes from SplitView demo items for clea…
gvreddy04 May 13, 2026
cbb10bf
Refactor code structure for improved readability and maintainability
gvreddy04 May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ internal override IEnumerable<NavItem> GetNavItems()
new (){ Id = "522", Text = "Script Loader", Href = DemoRouteConstants.Demos_URL_ScriptLoader, IconName = IconName.CodeSlash, ParentId = "5" },
new (){ Id = "523", Text = "Sidebar", Href = DemoRouteConstants.Demos_URL_Sidebar, IconName = IconName.LayoutSidebar, ParentId = "5" },
new (){ Id = "524", Text = "Sidebar 2", Href = DemoRouteConstants.Demos_URL_Sidebar2, IconName = IconName.ListNested, ParentId = "5" },
new (){ Id = "5245", Text = "Split View", Href = DemoRouteConstants.Demos_URL_SplitView, IconName = IconName.LayoutSplit, ParentId = "5" },
new (){ Id = "525", Text = "Sortable List", Href = DemoRouteConstants.Demos_URL_SortableList, IconName = IconName.ArrowsMove, ParentId = "5" },
new (){ Id = "526", Text = "Spinner", Href = DemoRouteConstants.Demos_URL_Spinners, IconName = IconName.ArrowRepeat, ParentId = "5" },
new (){ Id = "527", Text = "Tabs", Href = DemoRouteConstants.Demos_URL_Tabs, IconName = IconName.WindowPlus, ParentId = "5" },
Expand Down
1 change: 1 addition & 0 deletions BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ internal override IEnumerable<NavItem> GetNavItems()
new (){ Id = "522", Text = "Script Loader", Href = DemoRouteConstants.Docs_URL_ScriptLoader, IconName = IconName.CodeSlash, ParentId = "5" },
new (){ Id = "523", Text = "Sidebar", Href = DemoRouteConstants.Docs_URL_Sidebar, IconName = IconName.LayoutSidebar, ParentId = "5" },
new (){ Id = "524", Text = "Sidebar 2", Href = DemoRouteConstants.Docs_URL_Sidebar2, IconName = IconName.ListNested, ParentId = "5" },
new (){ Id = "5245", Text = "Split View", Href = DemoRouteConstants.Docs_URL_SplitView, IconName = IconName.LayoutSplit, ParentId = "5" },
new (){ Id = "525", Text = "Sortable List", Href = DemoRouteConstants.Docs_URL_SortableList, IconName = IconName.ArrowsMove, ParentId = "5" },
new (){ Id = "526", Text = "Spinner", Href = DemoRouteConstants.Docs_URL_Spinners, IconName = IconName.ArrowRepeat, ParentId = "5" },
new (){ Id = "527", Text = "Tabs", Href = DemoRouteConstants.Docs_URL_Tabs, IconName = IconName.WindowPlus, ParentId = "5" },
Expand Down
1 change: 1 addition & 0 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ internal override IEnumerable<NavItem> GetNavItems()
new (){ Id = "522", Text = "Script Loader", Href = DemoRouteConstants.Demos_URL_ScriptLoader, IconName = IconName.CodeSlash, ParentId = "5" },
new (){ Id = "523", Text = "Sidebar", Href = DemoRouteConstants.Demos_URL_Sidebar, IconName = IconName.LayoutSidebar, ParentId = "5" },
new (){ Id = "524", Text = "Sidebar 2", Href = DemoRouteConstants.Demos_URL_Sidebar2, IconName = IconName.ListNested, ParentId = "5" },
new (){ Id = "5245", Text = "Split View", Href = DemoRouteConstants.Demos_URL_SplitView, IconName = IconName.LayoutSplit, ParentId = "5" },
new (){ Id = "525", Text = "Sortable List", Href = DemoRouteConstants.Demos_URL_SortableList, IconName = IconName.ArrowsMove, ParentId = "5" },
new (){ Id = "526", Text = "Spinner", Href = DemoRouteConstants.Demos_URL_Spinners, IconName = IconName.ArrowRepeat, ParentId = "5" },
new (){ Id = "527", Text = "Tabs", Href = DemoRouteConstants.Demos_URL_Tabs, IconName = IconName.WindowPlus, ParentId = "5" },
Expand Down
104 changes: 104 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Demos/SplitView/SplitViewDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
@attribute [Route(pageUrl)]
@layout DemosMainLayout

<DemosPageHeadSection PageUrl="@pageUrl"
PageTitle="@pageTitle"
PageDescription="@pageDescription"
MetaTitle="@metaTitle"
MetaDescription="@metaDescription"
ImageUrl="@imageUrl" />

<DocsLink Href="@DemoRouteConstants.Docs_URL_SplitView" />

<Section Size="HeadingSize.H2" Name="Pane Content" PageUrl="@pageUrl" Link="pane-content">
<div class="mb-3">
<code>Pane1</code> and <code>Pane2</code> are the required content regions for SplitView.
</div>
<Demo Type="typeof(SplitView_Demo_01_Pane_Content)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Orientation" PageUrl="@pageUrl" Link="orientation">
<div class="mb-3">
Set <code>Orientation="SplitViewOrientation.Vertical"</code> to stack panes top to bottom with a horizontal divider.
</div>
<Demo Type="typeof(SplitView_Demo_02_Orientation)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Primary Pane Size" PageUrl="@pageUrl" Link="primary-pane-size">
<div class="mb-3">
Use <code>PrimaryPaneSize</code> to set the initial percentage allocated to the primary pane.
</div>
<Demo Type="typeof(SplitView_Demo_03_Primary_Pane_Size)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Primary Pane Size Changed" PageUrl="@pageUrl" Link="primary-pane-size-changed">
<div class="mb-3">
Use <code>@@bind-PrimaryPaneSize</code> or <code>PrimaryPaneSizeChanged</code> to react to live divider movement.
</div>
<Demo Type="typeof(SplitView_Demo_04_Primary_Pane_Size_Changed)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Minimum Pane Size" PageUrl="@pageUrl" Link="minimum-pane-size">
<div class="mb-3">
<code>MinimumPaneSize</code> clamps both panes so one side cannot fully collapse while dragging.
</div>
<Demo Type="typeof(SplitView_Demo_05_Minimum_Pane_Size)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Disabled State" PageUrl="@pageUrl" Link="disabled-state">
<div class="mb-3">
Set <code>IsDisabled="true"</code> to keep the layout visible while preventing pointer-based resizing.
</div>
<Demo Type="typeof(SplitView_Demo_06_Is_Disabled)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Semantic Color" PageUrl="@pageUrl" Link="semantic-color">
<div class="mb-3">
The <code>Color</code> parameter uses the <code>SplitViewColor</code> enum and maps to shared Bootstrap-backed CSS variables.
</div>
<Demo Type="typeof(SplitView_Demo_07_Color)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Custom Color" PageUrl="@pageUrl" Link="custom-color">
<div class="mb-3">
Use <code>CustomColor</code> when you want to pass a CSS color expression such as <code>var(...)</code> or <code>rgba(...)</code>.
</div>
<Demo Type="typeof(SplitView_Demo_08_Custom_Color)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="OnResizeStarted" PageUrl="@pageUrl" Link="onresizestarted">
<div class="mb-3">
<code>OnResizeStarted</code> fires once when the pointer first captures the divider.
</div>
<Demo Type="typeof(SplitView_Demo_09_On_Resize_Started)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="OnResized" PageUrl="@pageUrl" Link="onresized">
<div class="mb-3">
<code>OnResized</code> streams live primary and secondary pane percentages during drag.
</div>
<Demo Type="typeof(SplitView_Demo_10_On_Resized)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="OnResizeEnded" PageUrl="@pageUrl" Link="onresizeended">
<div class="mb-3">
<code>OnResizeEnded</code> is useful when you only want to persist the final pane sizes after dragging stops.
</div>
<Demo Type="typeof(SplitView_Demo_11_On_Resize_Ended)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Nested Layouts" PageUrl="@pageUrl" Link="nested-layouts">
<div class="mb-3">
SplitView supports nested layouts, enabling IDE-style and dashboard-style workspaces.
</div>
<Demo Type="typeof(SplitView_Demo_12_Nested_Layouts)" Tabs="true" />
</Section>

@code {
private const string pageUrl = DemoRouteConstants.Demos_URL_SplitView;
private const string pageTitle = "Blazor Split View";
private const string pageDescription = "The Blazor Split View component arranges two resizable panes horizontally or vertically with live drag updates, Bootstrap color theming, and focused parameter demos.";
private const string metaTitle = "Blazor Split View Component";
private const string metaDescription = "The Blazor Split View component arranges two resizable panes horizontally or vertically with live drag updates, Bootstrap color theming, and focused parameter demos.";
private const string imageUrl = DemoScreenshotSrcConstants.Demos_URL_SplitView;
}
22 changes: 22 additions & 0 deletions ...rBootstrap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_01_Pane_Content.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<SplitView Class="border rounded shadow-sm"
Style="height: 360px;">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">Pane1</div>
<h5 class="mb-3">Navigation</h5>
<div class="list-group list-group-flush">
<div class="list-group-item">Overview</div>
<div class="list-group-item">Customers</div>
<div class="list-group-item">Orders</div>
<div class="list-group-item">Reports</div>
</div>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Pane2</div>
<h4 class="mb-3">Workspace</h4>
<p class="text-secondary mb-0">Use the two required pane templates to define the resizable primary and secondary regions.</p>
</div>
</Pane2>
</SplitView>
48 changes: 48 additions & 0 deletions ...orBootstrap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_02_Orientation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<div class="small text-uppercase text-secondary mb-2">Horizontal Orientation</div>
<SplitView Class="border rounded shadow-sm mb-4"
Style="height: 320px;"
PrimaryPaneSize="32">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">Left Pane</div>
<h5 class="mb-3">Navigation</h5>
<p class="mb-0">The default horizontal orientation places panes side by side with a vertical divider.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Right Pane</div>
<h5 class="mb-3">Workspace</h5>
<ul class="mb-0">
<li>Dashboard widgets</li>
<li>Tables and forms</li>
<li>Contextual details</li>
</ul>
</div>
</Pane2>
</SplitView>

<div class="small text-uppercase text-secondary mb-2">Vertical Orientation</div>
<SplitView Class="border rounded shadow-sm"
Style="height: 420px;"
Orientation="SplitViewOrientation.Vertical"
PrimaryPaneSize="35">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">Top Pane</div>
<h5 class="mb-3">Summary</h5>
<p class="mb-0">Vertical orientation stacks panes and changes the divider to horizontal dragging.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Bottom Pane</div>
<h5 class="mb-3">Details</h5>
<ul class="mb-0">
<li>Release notes</li>
<li>Deployment checklist</li>
<li>Preview output</li>
</ul>
</div>
</Pane2>
</SplitView>
18 changes: 18 additions & 0 deletions ...strap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_03_Primary_Pane_Size.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<SplitView Class="border rounded shadow-sm"
Style="height: 320px;"
PrimaryPaneSize="30">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">Primary Pane</div>
<h5 class="mb-3">30%</h5>
<p class="mb-0">Set <code>PrimaryPaneSize</code> when you want the initial layout to favor one pane.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Secondary Pane</div>
<h5 class="mb-3">70%</h5>
<p class="mb-0">The remaining space is automatically assigned to the secondary pane.</p>
</div>
</Pane2>
</SplitView>
30 changes: 30 additions & 0 deletions ...mo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_04_Primary_Pane_Size_Changed.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<div class="d-flex flex-wrap gap-2 mb-3">
<button class="btn btn-outline-secondary btn-sm" @onclick='() => primaryPaneSize = 25'>25%</button>
<button class="btn btn-outline-secondary btn-sm" @onclick='() => primaryPaneSize = 40'>40%</button>
<button class="btn btn-outline-secondary btn-sm" @onclick='() => primaryPaneSize = 60'>60%</button>
<div class="small text-secondary align-self-center">Bound primary pane size: <strong>@primaryPaneSize.ToString("0.##")%</strong></div>
</div>

<SplitView Class="border rounded shadow-sm"
Style="height: 340px;"
MinimumPaneSize="15"
@bind-PrimaryPaneSize="primaryPaneSize">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">Primary Pane</div>
<h5 class="mb-3">Two-way Binding</h5>
<p class="mb-0">Drag the divider or use the buttons above to update the same bound value.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Secondary Pane</div>
<h5 class="mb-3">Live Value</h5>
<p class="mb-0">The parent component stays synchronized through <code>PrimaryPaneSizeChanged</code>.</p>
</div>
</Pane2>
</SplitView>

@code {
private double primaryPaneSize = 40;
}
19 changes: 19 additions & 0 deletions ...strap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_05_Minimum_Pane_Size.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<SplitView Class="border rounded shadow-sm"
Style="height: 340px;"
PrimaryPaneSize="35"
MinimumPaneSize="25">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">MinimumPaneSize</div>
<h5 class="mb-3">25%</h5>
<p class="mb-0">The divider cannot move past the 25% threshold, so the primary pane always remains usable.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Secondary Pane</div>
<h5 class="mb-3">Protected Layout</h5>
<p class="mb-0">The same minimum is enforced from the opposite side, keeping both panes visible.</p>
</div>
</Pane2>
</SplitView>
20 changes: 20 additions & 0 deletions ...orBootstrap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_06_Is_Disabled.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<SplitView Class="border rounded shadow-sm"
Style="height: 320px;"
PrimaryPaneSize="40"
Color="SplitViewColor.Secondary"
IsDisabled="true">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">Disabled Divider</div>
<h5 class="mb-3">Pinned Pane</h5>
<p class="mb-0">The layout remains visible, but pointer dragging and hover states are disabled.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Secondary Pane</div>
<h5 class="mb-3">Static Layout</h5>
<p class="mb-0">Programmatic updates to <code>PrimaryPaneSize</code> still work even when interaction is disabled.</p>
</div>
</Pane2>
</SplitView>
50 changes: 50 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_07_Color.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<div class="row g-3">
<div class="col-lg-4">
<SplitView Class="border rounded shadow-sm"
Style="height: 260px;"
PrimaryPaneSize="32"
Color="SplitViewColor.Primary">
<Pane1>
<div class="h-100 p-3 bg-body-tertiary">
<div class="fw-semibold mb-2">Primary</div>
<div class="small text-secondary">Bootstrap semantic color</div>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-3 bg-body">Hover and dragging derive from the same base divider color.</div>
</Pane2>
</SplitView>
</div>
<div class="col-lg-4">
<SplitView Class="border rounded shadow-sm"
Style="height: 260px;"
PrimaryPaneSize="32"
Color="SplitViewColor.Success">
<Pane1>
<div class="h-100 p-3 bg-body-tertiary">
<div class="fw-semibold mb-2">Success</div>
<div class="small text-secondary">Shared CSS variable mapping</div>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-3 bg-body">Use enum values when you want Bootstrap-aligned theming.</div>
</Pane2>
</SplitView>
</div>
<div class="col-lg-4">
<SplitView Class="border rounded shadow-sm"
Style="height: 260px;"
PrimaryPaneSize="32"
Color="SplitViewColor.Dark">
<Pane1>
<div class="h-100 p-3 bg-body-tertiary">
<div class="fw-semibold mb-2">Dark</div>
<div class="small text-secondary">Theme-aware shared CSS</div>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-3 bg-body">The divider color comes from the shared <code>blazor.bootstrap.css</code> token mapping.</div>
</Pane2>
</SplitView>
</div>
</div>
19 changes: 19 additions & 0 deletions ...rBootstrap.Demo.RCL/Components/Pages/Demos/SplitView/SplitView_Demo_08_Custom_Color.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<SplitView Class="border rounded shadow-sm"
Style="height: 320px;"
PrimaryPaneSize="34"
CustomColor="rgba(var(--bs-info-rgb), 0.85)">
<Pane1>
<div class="h-100 p-4 bg-body-tertiary">
<div class="small text-uppercase text-secondary mb-2">CustomColor</div>
<h5 class="mb-3">CSS Expression Override</h5>
<p class="mb-0">This example uses <code>rgba(var(--bs-info-rgb), 0.85)</code> instead of a semantic enum value.</p>
</div>
</Pane1>
<Pane2>
<div class="h-100 p-4 bg-body">
<div class="small text-uppercase text-secondary mb-2">Override Precedence</div>
<h5 class="mb-3">Inline Custom Value</h5>
<p class="mb-0">When both are supplied, <code>CustomColor</code> overrides the shared default and semantic enum class.</p>
</div>
</Pane2>
</SplitView>
Loading
Loading