BlazorFluentUIPractice/BlazorFluentUI/Components/Pages/Layouts/LayoutStack.razor

@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>.
    <br />
    2. <code>Alignment</code>: The child components are controlled via the <code>HorizontalAlignment</code> and <code>VerticalAlignment</code>.
    <br />
    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="fluent-border-d1" Style="height:200px"
                 Wrap="@wrap"
                 Orientation="@orientation" 
                 HorizontalAlignment="@horizontalAlignment" 
                 VerticalAlignment="@verticalAlignment">
        <div class="fluent-border-d1">Item1</div>
        <div class="fluent-border-d1">Item2</div>
        <div class="fluent-border-d1">
            <p class="fluent-border-d1" style="width:150px">Item3-1</p>
            <p class="fluent-border-d1" style="width:100px">Item3-2</p>
        </div>
        <div class="fluent-border-d1">Item4</div>
        <div class="fluent-border-d1">Item5</div>
        <div class="fluent-border-d1">
            <p class="fluent-border-d1" style="width:150px">Item4-1</p>
            <p class="fluent-border-d1" style="width:200px">Item4-2</p>
        </div>
    </FluentStack>
</FluentCard>

@code {
    Orientation orientation;
    HorizontalAlignment horizontalAlignment;
    VerticalAlignment verticalAlignment;
    bool wrap;
}