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.
68 lines
2.7 KiB
68 lines
2.7 KiB
@page "/layoutlayout"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<FluentLabel Typo="Typography.H3">Layout</FluentLabel>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
<FluentLabel Typo="Typography.Body">
|
|
The <code>FluentLayout</code> component is a container for other components.
|
|
</FluentLabel>
|
|
<FluentCard Width="auto" Height="auto">
|
|
<FluentStack Orientation="Orientation.Horizontal" Wrap="true">
|
|
<FluentSwitch @bind-Value="@showHeader">Header</FluentSwitch>
|
|
<FluentSwitch @bind-Value="@showNavMenu">NavMenu</FluentSwitch>
|
|
<FluentSwitch @bind-Value="@showBodyContent">BodyContent</FluentSwitch>
|
|
<FluentSwitch @bind-Value="@showFooter">Footer</FluentSwitch>
|
|
</FluentStack>
|
|
<FluentLayout Class="mt-3">
|
|
@if (showHeader)
|
|
{
|
|
<FluentHeader>
|
|
Header text
|
|
<FluentSpacer/>
|
|
Aligned to the end
|
|
</FluentHeader>
|
|
}
|
|
|
|
<FluentStack Orientation="Orientation.Horizontal">
|
|
@if (showNavMenu)
|
|
{
|
|
<FluentNavMenu Width="250">
|
|
<FluentNavLink Icon="@(new Icons.Regular.Size24.Home())">Item 1</FluentNavLink>
|
|
<FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())">Item 2</FluentNavLink>
|
|
<FluentNavGroup Title="Item 3">
|
|
<FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 3.1</FluentNavLink>
|
|
<FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 3.2</FluentNavLink>
|
|
</FluentNavGroup>
|
|
<FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true">Item 4</FluentNavLink>
|
|
</FluentNavMenu>
|
|
}
|
|
|
|
@if (showBodyContent)
|
|
{
|
|
<FluentBodyContent Style="max-height:300px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus.
|
|
Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis.
|
|
Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui.
|
|
Nulla fringilla sagittis orci eu consectetur. Fusce eget dolor non lectus placerat
|
|
</FluentBodyContent>
|
|
}
|
|
</FluentStack>
|
|
|
|
@if (showFooter)
|
|
{
|
|
<FluentFooter>
|
|
Footer text
|
|
<FluentSpacer/>
|
|
Aligned to the end
|
|
</FluentFooter>
|
|
}
|
|
</FluentLayout>
|
|
</FluentCard>
|
|
|
|
@code {
|
|
bool showHeader = true;
|
|
bool showNavMenu = true;
|
|
bool showBodyContent = true;
|
|
bool showFooter = true;
|
|
}
|
|
|