|
|
|
|
|
@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="p-2 fluent-border-d1">
|
|
|
|
|
|
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="p-2 fluent-border-d1">
|
|
|
|
|
|
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}";
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
