From 787223060367f1fc438876d5c2f168058050cce1 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Mon, 22 Jul 2024 15:58:40 +0900
Subject: [PATCH] divider

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Pages/Components/CompoDivider.razor       | 59 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoDivider.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 75189cc..5ead8c8 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/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>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoDivider.razor b/BlazorFluentUI/Components/Pages/Components/CompoDivider.razor
new file mode 100644
index 0000000..12970b2
--- /dev/null
+++ b/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 {
+
+}