--- lang: ja-jp breaks: true --- # Blazor に `Microsoft.Fast.Components.FluentUI` を適用する 2023-04-25 > FAST > https://www.fast.design/ > ![](https://i.imgur.com/GY9s4x2.png) > microsoft/fast > https://github.com/microsoft/fast > microsoft/fluentui-blazor > https://github.com/microsoft/fluentui-blazor > Use Fluent UI Web Components with Blazor > https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/blazor ## Blazor Server アプリテンプレートを使用してソリューションを作成する ![](https://i.imgur.com/Hei2Qir.png) ## csprojを変更する ```xml= <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>net7.0</TargetFramework> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> </PropertyGroup> <PropertyGroup> <!-- The icon component is part of the library. By default, NO icons (static assets) will be included when publishing the project. Setting the property 'PublishFluentIconAssets' to false (default), or leaving the property out completely, will disable publishing of the icon static assets (with exception of the icons that are being used by the library itself). Setting the property 'PublishFluentIconAssets' to 'true' will enable publishing of the icon static assets. You can limit what icon assets get published by specifying a set of icon sizes and a set of variants in the '<FluentIconSizes>' and '<FluentIconVariants>' properties respectively. To determine what icons will be published, the specified options for sizes and variants are combined. Specifying sizes '10' and '16' and variants 'Filled' and 'Regular' means all '10/Filled', all '10/Regular', all '16/Filled' and all '16/Regular' icons assets will be published. It is not possible to specify multiple individual combinations like '10/Filled' and '16/Regular' in the same set. When no icon size set is specified in the '<FluentIconSizes>' property, ALL sizes will be included* When no icon variant set is specified in the '<FluentIconVariants>' property, ALL variants will be included* * when publishing of icon assets is enabled --> <PublishFluentIconAssets>true</PublishFluentIconAssets> <!-- Specify (at least) one or more sizes from the following options (separated by ','): 10,12,16,20,24,28,32,48 Leave out the property to have all sizes included. --> <FluentIconSizes>10,12,16,20,24,28,32,48</FluentIconSizes> <!-- Specify (at least) one or more variants from the following options (separated by ','): Filled,Regular Leave out the property to have all variants included. --> <FluentIconVariants>Filled,Regular</FluentIconVariants> <!-- The emoji component is part of the library. By default, NO emojis (static assets) will be included when publishing the project. Setting the property 'PublishFluentEmoji' to false (default), or leaving the property out completely, will disable publishing of the emoji static assets. Setting the property 'PublishFluentEmojiAssets' to 'true' will enable publishing of the emoji static assets. You can limit what emoji assets get published by specifying a set of emoji groups and a set of emoji styles in the '<FluentEmojiGroups>' and '<FluentEmojiStyles>' properties respectively. To determine what emojis will be published, the specified options for sizes and variants are combined. Specifying emoji groups 'Activities' and 'Flags' and emoji styles 'Color' and 'Flat' means all 'Activities/Color', all 'Activities/Flat', all 'Flags/Color' and all 'Flags/Flat' emoji assets will be published. It is not possible to specify multiple individual combinations like 'Activities/Color' and 'Flags/Flat' in the same published set When no emoji group set is specified in the '<FluentEmojiGroups>' property, ALL groups will be included* When no emoji variant set is specified in the '<FluentEmojiStyles>' property, ALL styles will be included* * when publishing of emoji assets is enabled --> <PublishFluentEmojiAssets>true</PublishFluentEmojiAssets> <!-- Specify (at least) one or more groups from the following options (separated by ','): Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places Leave out the property to have all groups included. --> <FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups> <!-- Specify (at least) one or more styles from the following options (separated by ','): Color,Flat,HighContrast Leave out the property to have all styles included. --> <FluentEmojiStyles>Color,Flat,HighContrast</FluentEmojiStyles> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="3.0.0-preview.2" /> </ItemGroup> </Project> ``` ## Program.cs を変更 以下を追加 ```csharp= builder.Services.AddFluentUIComponents(); builder.Services.AddHttpClient(); ``` ## `_Imports.razor`にusingを追加 ```csharp= @using Microsoft.Fast.Components.FluentUI ``` ## `_Host.cshtml`を変更する ```htmlembedded= ・・・ <head> ・・・ <link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" /> <!-- <link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" /> <link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" /> --> ・・・ </head> ・・・ ``` ```htmlembedded= ・・・ <body> ・・・ <script type="module" src="https://cdn.jsdelivr.net/npm/@@fluentui/web-components/dist/web-components.min.js"></script> ・・・ </body> </html> ``` ## NavMenu.razor にページを追加 ```htmlembedded= ・・・ <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> ・・・ <div class="nav-item px-3"> <NavLink class="nav-link" href="Cog"> <span class="oi oi-cog" aria-hidden="true"></span> 設定 </NavLink> </div> </nav> </div> ・・・ ``` ## `Pages`/`Cog.razor` ページファイルを追加 ```htmlembedded= @page "/Cog" @using Microsoft.Fast.Components.FluentUI.DesignTokens; <h3>Cog</h3> <FluentCard> <h2>Hello World!</h2> <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton> </FluentCard> @code { } ``` ## 実行 ![](https://i.imgur.com/5Fl1Mf0.png) ###### tags: `Fluent UI Blazor` `Blazor` `Microsoft.Fast.Components.FluentUI` `Fluent`