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.
111 lines
4.3 KiB
111 lines
4.3 KiB
@page "/layoutgrid"
|
|
@using Microsoft.FluentUI.AspNetCore.Components.Extensions
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<FluentLabel Typo="Typography.H3">Grid</FluentLabel>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
<FluentLabel Typo="Typography.Body">
|
|
The <code>FluentGrid</code> component helps keeping layout consistent across various screen resolutions and sizes.
|
|
</FluentLabel>
|
|
<FluentCard Width="auto" Height="auto">
|
|
<FluentStack Class="mb-3" VerticalAlignment="VerticalAlignment.Center" Wrap="true">
|
|
<FluentStack Orientation="Orientation.Horizontal">
|
|
<FluentLabel>Justify</FluentLabel>
|
|
<FluentSelect Items=@(Enum.GetValues<JustifyContent>())
|
|
OptionValue="@(c => c.ToAttributeValue())"
|
|
TOption="JustifyContent"
|
|
Position="SelectPosition.Below"
|
|
@bind-SelectedOption="@justification" />
|
|
</FluentStack>
|
|
<FluentStack Orientation="Orientation.Horizontal">
|
|
<FluentLabel>Spacing</FluentLabel>
|
|
<FluentSlider class="fluent-slider-w300px" @bind-Value="@spacing" Min="0" Max="10" Step="1" />
|
|
</FluentStack>
|
|
</FluentStack>
|
|
|
|
<FluentGrid class="fluent-border-s1-r10" Justify="@justification" Spacing="@spacing"
|
|
OnBreakpointEnter="@OnBreakpointEnterHandler"
|
|
AdaptiveRendering="true">
|
|
<FluentGridItem xs="12">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="12"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="12" sm="6">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="12" sm="6"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="6" sm="3">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="6" sm="3"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="6" sm="3">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="6" sm="3"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="6" sm="3">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="6" sm="3"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="6" sm="3">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="6" sm="3"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="3">
|
|
<FluentLabel class="fluent-border-s1-r10" Alignment="HorizontalAlignment.Center">
|
|
xs="3"
|
|
</FluentLabel>
|
|
</FluentGridItem>
|
|
</FluentGrid>
|
|
|
|
<FluentLabel>@message</FluentLabel>
|
|
</FluentCard>
|
|
|
|
<FluentLabel Typo="Typography.H3">Breakpoints</FluentLabel>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
<FluentLabel Typo="Typography.Body">
|
|
Breakpoints help you control your layout base on widows size.
|
|
</FluentLabel>
|
|
<FluentCard Width="auto" Height="auto">
|
|
<FluentLabel>
|
|
Extra Small <code>xd</code> <600px, Small to large phone
|
|
</FluentLabel>
|
|
<FluentLabel>
|
|
Small <code>sm</code> <960px, Small to medium tablet
|
|
</FluentLabel>
|
|
<FluentLabel>
|
|
Medium <code>md</code> <1280px, Large tablet to laptop
|
|
</FluentLabel>
|
|
<FluentLabel>
|
|
Large <code>lg</code> <1920px, Desktop
|
|
</FluentLabel>
|
|
<FluentLabel>
|
|
Extra Large <code>xl</code> <2560px, HD and 4k
|
|
</FluentLabel>
|
|
<FluentLabel>
|
|
Extra Extra Large <code>xxl</code> =>2560px, 4k+ and ultra-wide
|
|
</FluentLabel>
|
|
|
|
</FluentCard>
|
|
|
|
@code {
|
|
JustifyContent justification = JustifyContent.FlexStart;
|
|
int spacing = 3;
|
|
string message = "Message: ";
|
|
|
|
void OnBreakpointEnterHandler(GridItemSize size)
|
|
{
|
|
message = $"Message: Page size {size}";
|
|
}
|
|
}
|
|
|