spacer

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>

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">

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 {
+
+}