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.
62 lines
2.2 KiB
62 lines
2.2 KiB
@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 Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);">
|
|
<FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
|
|
<FluentLabel>Example of content</FluentLabel>
|
|
<FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
|
|
<FluentButton Appearance="Appearance.Accent">Accent</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")}");
|
|
}
|
|
}
|
|
|