splitter

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -18,6 +18,7 @@
                 <FluentNavLink Href="layoutlayout" Icon="@(new Icons.Regular.Size20.LayoutColumnOneThirdLeft())" IconColor="Color.Accent">Layout</FluentNavLink>
                 <FluentNavLink Href="layoutmainlayout" Icon="@(new Icons.Regular.Size20.LayoutColumnTwoSplitRight())" IconColor="Color.Accent">MainLayout</FluentNavLink>
                 <FluentNavLink Href="layoutspacer" Icon="@(new Icons.Regular.Size20.Spacebar())" IconColor="Color.Accent">Spacer</FluentNavLink>
+                <FluentNavLink Href="layoutsplitter" Icon="@(new Icons.Regular.Size20.SplitVertical())" IconColor="Color.Accent">Splitter</FluentNavLink>
             </FluentNavGroup>
         </FluentNavMenu>
     </nav>

BlazorFluentUI/Components/Pages/LayoutGrid.razor

@@ -3,14 +3,6 @@
 
 @rendermode RenderMode.InteractiveServer
 
-<style>
-    .round-edge {
-        border-radius: 10px;
-        border-style: solid;
-        border-width: 1px
-    }
-</style>
-
 <FluentLabel Typo="Typography.H3">Grid</FluentLabel>
 <FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
 <FluentLabel Typo="Typography.Body">

BlazorFluentUI/Components/Pages/LayoutSplitter.razor

@@ -0,0 +1,64 @@
+@page "/layoutsplitter"
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Splitter</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentSplitter</code> have two panels of arbitrary content in a horizontal or vertical layout.
+    The user can drag the splitter to resize the panel.
+</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentSelect Items="@(Enum.GetValues<Orientation>())"
+                  OptionValue="@(c => c.ToAttributeValue())"
+                  TOption="Orientation"
+                  Position="SelectPosition.Below"
+                  @bind-SelectedOption="@orientation"/>
+    
+    <FluentSwitch CheckedMessage="Collapsed" UncheckedMessage="Split" @bind-Value="@collapse"/>
+
+    <FluentSwitch CheckedMessage="Bar handle shown" UncheckedMessage="Bar handle hidden" @bind-Value="@barhandle" />
+
+    <FluentSplitter class="mt-3" Orientation="@orientation" Collapsed="@collapse" BarHandle="@barhandle"
+                    OnResized="@OnResizedChanged" OnCollapsed="@OnCollapsedChanged" OnExpanded="@OnExpandedChanged"
+                    BarSize="6" Panel1MinSize="15%" Panel2MinSize="50px">
+        <Panel1>
+            <div class="dashed-edge p-2">
+                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. 
+            </div>
+        </Panel1>
+        <Panel2>
+            <div class="dashed-edge p-2">
+                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.
+            </div>
+        </Panel2>
+    </FluentSplitter>
+    <FluentLabel Class="mt-3">Handler:@message</FluentLabel>
+</FluentCard>
+
+@code {
+    Orientation orientation = Orientation.Horizontal;
+    bool collapse = false;
+    bool barhandle = true;
+
+    string message = "";
+
+    private void OnCollapsedChanged(bool status)
+    {
+        message = $"OnCollapsedChanged: {status}";
+    }
+
+    private void OnExpandedChanged(bool status)
+    {
+        message = $"OnExpandedChanged: {status}";
+    }
+
+    private void OnResizedChanged(SplitterResizedEventArgs args)
+    {
+        message = $"OnResizedChanged: Panel1Size {args.Panel1Size}, Panel2Size {args.Panel2Size}";
+    }
+}

BlazorFluentUI/wwwroot/fluentcustom.css

@@ -2,3 +2,14 @@
 	max-width: 300px;
 	margin-top: 10px
 }
+
+.round-edge {
+	border-radius: 10px;
+	border-style: solid;
+	border-width: 1px
+}
+
+.dashed-edge {
+	border-style: dashed;
+	border-width: 1px
+}