BlazorFluentUIPractice/BlazorFluentUI/Components/Pages/LayoutSplitter.razor

@page "/layoutsplitter"
@using Microsoft.FluentUI.AspNetCore.Components.Extensions

@rendermode RenderMode.InteractiveServer

<FluentLabel Typo="Typography.H3">Splitter</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    The <code>FluentSplitter</code> have two panels of arbitrary content in a horizontal or vertical layout.
    The user can drag the splitter to resize the panel.
</FluentLabel>
<FluentCard Width="auto" Height="auto">
    <FluentSelect Items="@(Enum.GetValues<Orientation>())"
                  OptionValue="@(c => c.ToAttributeValue())"
                  TOption="Orientation"
                  Position="SelectPosition.Below"
                  @bind-SelectedOption="@orientation"/>
    
    <FluentSwitch CheckedMessage="Collapsed" UncheckedMessage="Split" @bind-Value="@collapse"/>

    <FluentSwitch CheckedMessage="Bar handle shown" UncheckedMessage="Bar handle hidden" @bind-Value="@barhandle" />

    <FluentSplitter class="mt-3" Orientation="@orientation" Collapsed="@collapse" BarHandle="@barhandle"
                    OnResized="@OnResizedChanged" OnCollapsed="@OnCollapsedChanged" OnExpanded="@OnExpandedChanged"
                    BarSize="6" Panel1MinSize="15%" Panel2MinSize="50px">
        <Panel1>
            <div class="dashed-edge p-2">
                Panel 1 -  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci
                dapibus ultrices in iaculis. 
            </div>
        </Panel1>
        <Panel2>
            <div class="dashed-edge p-2">
                Panel 2 - Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum
                dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam.
            </div>
        </Panel2>
    </FluentSplitter>
    <FluentLabel Class="mt-3">Handler:@message</FluentLabel>
</FluentCard>

@code {
    Orientation orientation = Orientation.Horizontal;
    bool collapse = false;
    bool barhandle = true;

    string message = "";

    private void OnCollapsedChanged(bool status)
    {
        message = $"OnCollapsedChanged: {status}";
    }

    private void OnExpandedChanged(bool status)
    {
        message = $"OnExpandedChanged: {status}";
    }

    private void OnResizedChanged(SplitterResizedEventArgs args)
    {
        message = $"OnResizedChanged: Panel1Size {args.Panel1Size}, Panel2Size {args.Panel2Size}";
    }
}