SAKURUG TECHBLOG
目次
BlazorにおけるUIコンポーネントとは？
BlazorではGUIの表現を基本的にHTML+CSSに依存しておりそのUIの統一性はCSSに依存しているといえる。
そこで、システム間のある程度の操作性の統一性やUIの統一性を表現するためにUIコンポーネントというものが必要になってくる。
一般的に、ボタン・テキストボックスといったUI部品が提供される。
また、UIコンポーネントによってはグラフなどのリッチな部品が提供されるものも存在している。
Fluent UI Blazorとは？
Fluent UIとは現在、Microsoftが進めているデザインシステムです。
Microsoft Teamsなどにみられます。
このような、標準的なUIシステムを採用することで新しいアプリケーションの操作方法の学習コストを下げる狙いがあります。
注意
この、記事は2023年8月8日現在のFluent UI Blazor2.4.2に基づいて記述されています。
このライブラリの次のバージョンがまもなく登場するとアナウンスされています。導入方法に変更が加わる可能性について留意してください。
導入方法
パッケージをプロジェクトに追加
以下のコマンドでパッケージ追加します。
dotnet add package Microsoft.Fast.Components.FluentUI
スタイルシート追加
Blazor WebAssemblyの場合は、index.htmlにBlazor Serverの場合は_Layout.cshtmlに、.NET8 PreviewのBlazor Appsの場合は、App.razorに<head>セクション内に以下のスタイルシートの記述を追加します。
PROJECT_NAMEのところは、作成したプロジェクト名で適宜変更してください。
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
<link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" />
Fluent UIのUsing設定
_Imports.razorに以下の記述を追加します。
@using Microsoft.Fast.Components.FluentUI
絵文字アイコンを使用するようにプロジェクトのセットアップ
プロジェクトファイル(.csproj)に以下の記述を追加します。
<PropertyGroup>
<PublishFluentIconAssets>true</PublishFluentIconAssets>
<FluentIconSizes>10,12,16,20,24,28,32,48</FluentIconSizes>
<FluentIconVariants>Filled,Regular</FluentIconVariants>
<PublishFluentEmojiAssets>true</PublishFluentEmojiAssets>
<FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups>
<FluentEmojiStyles>Color,Flat,HighContrast</FluentEmojiStyles>
</PropertyGroup>
これらの構成を読み取るためにProgram.csに追加の構成が必要です。
builder.Services.AddFluentUIComponents(options =>
{
options.HostingModel = {see remark below};
options.IconConfiguration = ConfigurationGenerator.GetIconConfiguration();
options.EmojiConfiguration = ConfigurationGenerator.GetEmojiConfiguration();
});
options.HostingModelのところは、BlazorHostingModel.ServerまたはBlazorHostingModel.WebAssmblyです。
ここまでで、導入おわりです。
数々のUI部品を使ってみましょう！
参考URL：https://www.fluentui-blazor.net/
ABOUT ME
