|
|
|
@ -1,7 +1,62 @@ |
|
|
|
@page "/" |
|
|
|
@page "/" |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer |
|
|
|
|
|
|
|
|
|
|
|
<PageTitle>Home</PageTitle> |
|
|
|
<PageTitle>Home</PageTitle> |
|
|
|
|
|
|
|
|
|
|
|
<h1>Hello, world!</h1> |
|
|
|
<FluentCard> |
|
|
|
|
|
|
|
<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")}"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
Welcome to your new Fluent Blazor app. |
|
|
|
void OnLuminanceChanged(LuminanceChangedEventArgs e) |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
// DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
