divider

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -59,6 +59,7 @@
                 <FluentNavLink Href="compocard" Icon="@(new Icons.Regular.Size20.CardUi())" IconColor="Color.Accent">Card</FluentNavLink>
                 <FluentNavLink Href="compodatagrid" Icon="@(new Icons.Regular.Size20.Grid())" IconColor="Color.Accent">DataGrid</FluentNavLink>
                 <FluentNavLink Href="compodialog" Icon="@(new Icons.Regular.Size20.AppTitle())" IconColor="Color.Accent">Dialog</FluentNavLink>
+                <FluentNavLink Href="compodivider" Icon="@(new Icons.Regular.Size20.DividerShort())" IconColor="Color.Accent">Divider</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoDivider.razor

@@ -0,0 +1,59 @@
+@page "/compodivider"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Divider</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentDivider</code> wraps a web component <code>hr</code>(Horizontal Rule) element.
+</div>
+
+
+<h4 class="mt-4">Horizontal Divider</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h5>Default</h5>
+    <FluentDivider/>
+    <br />
+    <h5>Role="Presentation"</h5>
+    <p>
+        <FluentStack Orientation="Orientation.Vertical">
+            <span>before divider</span>
+            <FluentDivider Style="width:100%" Role="DividerRole.Presentation" />
+            <span>after divider</span>
+        </FluentStack>
+    </p>
+    <br />
+    <h5>Role="Separator"</h5>
+    <p>
+        <FluentStack Orientation="Orientation.Vertical">
+            <span>before divider</span>
+            <FluentDivider Style="width:100%" Role="DividerRole.Separator" />
+            <span>after divider</span>
+        </FluentStack>
+    </p>
+</FluentCard>
+
+<h4 class="mt-4">Vertical Divider</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h5>Role="Presentation"</h5>
+    <p>
+        <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+            <span>before divider</span>
+            <FluentDivider Style="height:50px" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
+            <span>after divider</span>
+        </FluentStack>
+    </p>
+    <br />
+    <h5>Role="Separator"</h5>
+    <p>
+        <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+            <span>before divider</span>
+            <FluentDivider Style="height:50px" Role="DividerRole.Separator" Orientation="Orientation.Vertical" />
+            <span>after divider</span>
+        </FluentStack>
+    </p>
+</FluentCard>
+
+@code {
+
+}