From d68b2ac5702b764e6dec39fb3b49c635b7ddc125 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@google.com>
Date: Fri, 5 Jul 2024 23:49:16 +0900
Subject: [PATCH] spacer

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Components/Pages/LayoutMainLayout.razor   |  4 +--
 .../Components/Pages/LayoutSpacer.razor       | 35 +++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 BlazorFluentUI/Components/Pages/LayoutSpacer.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index bc1ff66..a9542cf 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -17,6 +17,7 @@
                 <FluentNavLink Href="layoutgrid" Icon="@(new Icons.Regular.Size20.Grid())" IconColor="Color.Accent">Grid</FluentNavLink>
                 <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>
             </FluentNavGroup>
         </FluentNavMenu>
     </nav>
diff --git a/BlazorFluentUI/Components/Pages/LayoutMainLayout.razor b/BlazorFluentUI/Components/Pages/LayoutMainLayout.razor
index 274d779..5c30c34 100644
--- a/BlazorFluentUI/Components/Pages/LayoutMainLayout.razor
+++ b/BlazorFluentUI/Components/Pages/LayoutMainLayout.razor
@@ -2,10 +2,10 @@
 
 @rendermode RenderMode.InteractiveServer
 
-<FluentLabel Typo="Typography.H3">Layout</FluentLabel>
+<FluentLabel Typo="Typography.H3">MainLayout</FluentLabel>
 <FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
 <FluentLabel Typo="Typography.Body">
-    The <code>FluentMainLayout</code> component offers a framework for a layout of a page in a site
+    The <code>FluentMainLayout</code> component offers a framework for a layout of a page in a site.
 </FluentLabel>
 <FluentCard Width="auto" Height="300px">
     <FluentMainLayout class="mt-3" NavMenuTitle="Navigation menu">
diff --git a/BlazorFluentUI/Components/Pages/LayoutSpacer.razor b/BlazorFluentUI/Components/Pages/LayoutSpacer.razor
new file mode 100644
index 0000000..b827646
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/LayoutSpacer.razor
@@ -0,0 +1,35 @@
+@page "/layoutspacer"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Spacer</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentSpacer</code> component offers a space between components.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Spacer with flexible(default) width</FluentLabel>
+<FluentCard Width="auto" Height="auto" Style="display:flex">
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Neutral" />
+    <FluentSpacer/>
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Accent" />
+    <FluentSpacer />
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Warning" />
+    <FluentSpacer />
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Info" />
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Spacer with set width</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Neutral" />
+    <FluentSpacer Width="50"/>
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Accent" />
+    <FluentSpacer Width="50" />
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Warning" />
+    <FluentSpacer Width="50" />
+    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Info" />
+</FluentCard>
+
+@code {
+
+}