|
|
|
|
|
@page "/"
|
|
|
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
|
|
|
|
|
|
|
|
<PageTitle>Home</PageTitle>
|
|
|
|
|
|
|
|
|
|
|
|
<FluentCard Width="auto" Height="auto">
|
|
|
|
|
|
<h2>Hello Fluent UI!</h2>
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.EmojiSmileSlight())" />
|
|
|
|
|
|
<FluentIcon Value="@(Icon.FromImageUrl("/favicon.ico"))" />
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.EmojiSmileSlight())" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 class="mt-5">Change Theme</h2>
|
|
|
|
|
|
<FluentGrid>
|
|
|
|
|
|
<FluentGridItem>
|
|
|
|
|
|
<FluentSelect Label="Theme"
|
|
|
|
|
|
Width="250px"
|
|
|
|
|
|
Items="@(Enum.GetValues<DesignThemeModes>())"
|
|
|
|
|
|
@bind-SelectedOption="@Mode" />
|
|
|
|
|
|
</FluentGridItem>
|
|
|
|
|
|
|
|
|
|
|
|
<FluentGridItem>
|
|
|
|
|
|
<FluentSelect Label="Color"
|
|
|
|
|
|
Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
|
|
|
|
|
|
Height="200px"
|
|
|
|
|
|
Width="250px"
|
|
|
|
|
|
@bind-SelectedOption="@OfficeColor">
|
|
|
|
|
|
</FluentSelect>
|
|
|
|
|
|
</FluentGridItem>
|
|
|
|
|
|
</FluentGrid>
|
|
|
|
|
|
|
|
|
|
|
|
<FluentStack Class="m-3 p-3 fluent-border-s1" HorizontalAlignment="HorizontalAlignment.Center" Orientation="Orientation.Vertical" VerticalGap="5">
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
|
|
|
|
|
|
<FluentLabel>Example of content</FluentLabel>
|
|
|
|
|
|
<FluentButton Appearance="Appearance.Neutral">Neutral</FluentButton>
|
|
|
|
|
|
<FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
|
|
|
|
|
|
<FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
|
|
|
|
|
|
<FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
|
|
|
|
|
|
<FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
|
|
|
|
|
|
</FluentStack>
|
|
|
|
|
|
</FluentCard>
|
|
|
|
|
|
|
|
|
|
|
|
<FluentDesignTheme @bind-Mode="@Mode"
|
|
|
|
|
|
@bind-OfficeColor="@OfficeColor"
|
|
|
|
|
|
OnLoaded="@OnLoaded"
|
|
|
|
|
|
OnLuminanceChanged="@OnLuminanceChanged"
|
|
|
|
|
|
StorageName="theme" />
|
|
|
|
|
|
|
|
|
|
|
|
@code
|
|
|
|
|
|
{
|
|
|
|
|
|
public DesignThemeModes Mode { get; set; }
|
|
|
|
|
|
public OfficeColor? OfficeColor { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
void OnLoaded(LoadedEventArgs e)
|
|
|
|
|
|
{
|
|
|
|
|
|
// DemoLogger.WriteLine($"Loaded: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
void OnLuminanceChanged(LuminanceChangedEventArgs e)
|
|
|
|
|
|
{
|
|
|
|
|
|
// DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
