You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
3.3 KiB
76 lines
3.3 KiB
@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="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;
|
|
}
|
|
|