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.
85 lines
3.4 KiB
85 lines
3.4 KiB
@page "/compoappbar"
|
|
|
|
@inject IDialogService DialogService;
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<FluentLabel Typo="Typography.H3">AppBar</FluentLabel>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
The <code>FluentAppBar</code> component is an implementation of the AppBar as you know from the Teams application.
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<FluentStack Orientation="Orientation.Vertical" Style="height: 330px;">
|
|
<FluentAppBar Style="height: 100%;">
|
|
<FluentAppBarItem Href="/"
|
|
Match="NavLinkMatch.All"
|
|
IconRest="HomeIcon()"
|
|
IconActive="HomeIcon(active: true)"
|
|
Text="Home"
|
|
OnClick="@OnClick" />
|
|
<FluentAppBarItem Href="/AppBar"
|
|
IconRest="AppBarIcon()"
|
|
IconActive="AppBarIcon(active: true)"
|
|
Text="AppBar"
|
|
OnClick="@OnClick" />
|
|
<FluentAppBarItem IconRest="WhatsNewIcon()"
|
|
IconActive="WhatsNewIcon(active: true)"
|
|
Text="What's New'"
|
|
Count="5"
|
|
OnClick="@ShowSuccessAsync" />
|
|
<FluentAppBarItem Href="@(null)"
|
|
IconRest="IconsIcon()"
|
|
IconActive="IconsIcon(active: true)"
|
|
Text="Icons"
|
|
OnClick="ShowWarningAsync" />
|
|
<FluentAppBarItem Href="/Dialog"
|
|
IconRest="DialogIcon()"
|
|
IconActive="DialogIcon(active: true)"
|
|
Text="Dialog"
|
|
OnClick="@OnClick" />
|
|
</FluentAppBar>
|
|
</FluentStack>
|
|
<p><b>Message</b>: @message?.ToString()</p>
|
|
|
|
</FluentCard>
|
|
|
|
@code {
|
|
private static Icon HomeIcon(bool active = false) =>
|
|
active ? new Icons.Filled.Size24.Home()
|
|
: new Icons.Regular.Size24.Home();
|
|
|
|
private static Icon AppBarIcon(bool active = false) =>
|
|
active ? new Icons.Filled.Size24.AppsList()
|
|
: new Icons.Regular.Size24.AppsList();
|
|
|
|
private static Icon WhatsNewIcon(bool active = false) =>
|
|
active ? new Icons.Filled.Size24.Info()
|
|
: new Icons.Regular.Size24.Info();
|
|
|
|
private static Icon IconsIcon(bool active = false) =>
|
|
active ? new Icons.Filled.Size24.Symbols()
|
|
: new Icons.Regular.Size24.Symbols();
|
|
|
|
private static Icon DialogIcon(bool active = false) =>
|
|
active ? new Icons.Filled.Size24.AppGeneric()
|
|
: new Icons.Regular.Size24.AppGeneric();
|
|
|
|
string message = string.Empty;
|
|
void OnClick(IAppBarItem item)
|
|
{
|
|
message = $"{item.Text} clicked.";
|
|
}
|
|
|
|
async Task ShowSuccessAsync(IAppBarItem item)
|
|
{
|
|
var dialog = await DialogService.ShowSuccessAsync($"You clicked {item.Text}.");
|
|
var result = await dialog.Result;
|
|
}
|
|
|
|
async Task ShowWarningAsync(IAppBarItem item)
|
|
{
|
|
var dialog = await DialogService.ShowWarningAsync($"You clicked {item.Text}. Are you sure?");
|
|
var result = await dialog.Result;
|
|
}
|
|
}
|
|
|