stack

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -19,6 +19,7 @@
                 <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>
+                <FluentNavLink Href="layoutstack" Icon="@(new Icons.Regular.Size20.Stack())" IconColor="Color.Accent">Stack</FluentNavLink>
             </FluentNavGroup>
         </FluentNavMenu>
     </nav>

BlazorFluentUI/Components/Pages/LayoutStack.razor

@@ -0,0 +1,74 @@
+@page "/layoutstack"
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Stack</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentStack</code> is a container-type component that can be used to arrange its child components in horizontal or vertical stack.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Characteristics</FluentLabel>
+<FluentLabel Class="ms-2">
+    1. <code>Orientation</code>: The child components are controlled via the <code>Horizontal</code>(default) or <code>Vertical</code>.
+    2. <code>Alignment</code>: The child components are controlled via the <code>HorizontalAlignment</code> and <code>VerticalAlignment</code>.
+    3. <code>Spacing</code>: The child components are controlled via the <code>HorizontalGap</code> and <code>VerticalGap</code>.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Wrapping</FluentLabel>
+<FluentLabel Class="ms-2">
+    <code>Wrap</code>: Determines if childs overflow the <code>FluentStack</code> container or wrap around it via <code>true</code> or <code>false</code>.
+</FluentLabel>
+
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentLabel>Alignment of the stack contents</FluentLabel>
+    <FluentStack Orientation="Orientation.Vertical">
+        <div style="width:150px">
+            Orientation
+            <FluentSelect Items="@(Enum.GetValues<Orientation>())"
+                          OptionValue="@(c => c.ToAttributeValue())"
+                          TOption="Orientation"
+                          Position="SelectPosition.Below"
+                          @bind-SelectedOption="@orientation" />
+        </div>
+        <div style="width:150px">
+            Horizontal
+            <FluentListbox Items="@(Enum.GetValues<HorizontalAlignment>())" @bind-SelectedOption="@horizontalAlignment"/>
+        </div>
+        <div style="width:150px">
+            Vertical
+            <FluentListbox Items="@(Enum.GetValues<VerticalAlignment>())" @bind-SelectedOption="@verticalAlignment" />
+        </div>
+        <div style="width:150px">
+            <FluentSwitch CheckedMessage="Wrap" UncheckedMessage="No wrap" @bind-Value="@wrap" />
+        </div>
+    </FluentStack>
+
+    <div class="mt-1">Result</div>
+    <FluentStack Class="dashed-edge" Style="height:200px" 
+                 Wrap="@wrap"
+                 Orientation="@orientation" 
+                 HorizontalAlignment="@horizontalAlignment" 
+                 VerticalAlignment="@verticalAlignment">
+        <div class="dashed-edge">Item1</div>
+        <div class="dashed-edge">Item2</div>
+        <div class="dashed-edge">
+            <p class="dashed-edge" style="width:150px">Item3-1</p>
+            <p class="dashed-edge" style="width:100px">Item3-2</p>
+        </div>
+        <div class="dashed-edge">Item4</div>
+        <div class="dashed-edge">Item5</div>
+        <div class="dashed-edge">
+            <p class="dashed-edge" style="width:150px">Item4-1</p>
+            <p class="dashed-edge" style="width:200px">Item4-2</p>
+        </div>
+    </FluentStack>
+</FluentCard>
+
+@code {
+    Orientation orientation;
+    HorizontalAlignment horizontalAlignment;
+    VerticalAlignment verticalAlignment;
+    bool wrap;
+}