.NETラボ 勉強会 2023年9月 https://dotnetlab.connpass.com/event/294666/
#FluentUI #Blazor
祝 Ver.3リリース FluentUI Blazorのすすめ株式会社SAKURUGエンジニアリングユニット草場 友光.NETラボ 2023年9月
View Slide
自己紹介• 普段は主にシステムをAzureにモダナイズする仕事をしています。• コミュニティ活動を通じて知識をアップデートしています。• 2022/08-2023 Microsoft MVP(Developer Technologies)• tomo_kusaba
宣伝【VISION】ひとの可能性を開花させる企業であり続けるVISIONに共感できる仲間募集中。
注意• 個人の見解・解釈が多分に入っています。• 見解の相違・事実誤認などありましたらご指摘ください。• 本日リリースの3.1.0の内容に基づいています。• #dotnetlabでtweetすると左側に表示されます
今日の目的• Fluent UI Blazor 3がリリースされました。• 機能アップポイントや使いこなしポイントを見ていきましょう！
Fluent UIとは• Microsoftが提唱するUIデザインシステム• W3C準拠• Fast上に構築されている• このFluent UIの実装をするために用意されたMicrosoft 公式のBlazorUIコンポーネントがMicrosoft.Fast.Components.FluentUI• すべての主要なブラウザで動作する
... Fastのタグを元にJavaScriptでDOM生成BlazorのUIコンポーネントとしてパラメータを受け取り、Fastのタグを出力Fast上に構築とは？JSInteropFluent UIのCSS
Fluent UI Blazor導入方法• パッケージを導入dotnet add package Microsoft.Fast.Components.FluentUI• スタイル• WebAssemblyの場合index.htmlにServerの場合_Layout.cshtmlに• using• _Imports.razorにusingを追加@using Microsoft.Fast.Components.FluentUI• Program.csに以下を追加builder.Services.AddFluentUIComponents(options =>{options.HostingModel = BlazorHostingModel.WebAssembly;});
デザイントークン• デザインのカスタマイズとパーソナライゼーションを自動的に行うことができます。• これは、デザイントークンを設定することで実現することができます。• 例えば、「ライトモード」や「ダークモード」と呼ばれるようなスタイル設定をデザイントークンの機能によって設定することができます。
アクセントカラー• アクセントカラーとはアプリケーションUIの中で象徴的な色を1つ設定することができる• 例えば。。。。• Excel→#107C41• PowerPoint → #C43E1C• Word → #185ABD• Teams → #6264A7
レイアウトコンポーネント• Ver3よりレイアウトコンポーネントが追加されている• 今までBootstrapで行ってきたようなGridシステムのようなレイアウトやスタックといったレイアウトが容易に行えるようになっています。• これらの組み合わせによって容易に3ペインの画面などを作ることができます。
Grid• 12ポイントのグリッドシステム• 5種類のブレイクポイントを持っている• レイアウトをするのに最も多用するコンポーネント• BootstrapのGridから移行するのに違和感なく使うことができると思います。
Stack• 子コンポーネントを水平または垂直に配置する• 子コンポーネントがコンテナ内でどのように整列されるか？• 右より？左より？センタリング？• コンポーネント間の間隔を調整
入力コンポーネント• FluentInputBaseを継承している• FluentInputBaseはBlazorのComponentBaseを継承している• 従って、EditFormに用意されているデータ検証が使える！！
Text Field• string?型の入力をサポートする入力コンポーネント
Number Field• 数値の入力をサポートする入力コンポーネント• ただし、EditFormで入力検証時には小数値の入力には注意が必要
DatePicker/TimePicker• 日付や時刻をドロップダウンで選択し入力する機能があります。
Checkbox• いわゆるチェックボックスのFluentUIデザイン実装
Search Field• 検索要素のテキスト入力要素
Listbox/Combobox/Selectbox• コード上はこの3つはほぼ共通。• ComboboxとSelectboxの違いは複数選択が可能かどうか＞Selectboxは複数選択のオプションあり
DataGrid• 内部的にはQuickGridのコードを流用して作成されている• 表形式のデータを表示するために使用される→ 来月詳しい使い方をユースケース別に解説していきます！
他にもいろいろと便利なUI
Switch• bool値を入力する入力コンポーネント
Tabs• 水平方向と垂直方向のタブを実装することができる
Dialog• プライマリウィンドウまたは別のダイアログウィンドウにオーバーレイされるウィンドウ• 例えば、モーダルウィンドウとか・・・
CodeEditor• Monacoエディタのラッパー
Tooltip• ツールチップはマウスを合わせると情報を提示する部品
Panel• 画面の右側あるいは左側に表示されるダイアログ
AutoComplete• 3．1．0の新機能(new)• デモにて！！
テンプレートにFluent UIを導入した• BlazorテンプレートはHTML＋Bootstrap＋CSSで3ペインの画面構成を行っている• しかし、せっかくBlazor使っているのだから基本HTMLは書きたくない！！• Fluent UI Blazor 3よりLayout Componentsが入っている！• きっとこれで可能！
MainLayout.razorheaderStyle="height:stretch">@Body.NET Lab 2023/09 footerFluentLayoutFluentHeaderFluentStack(水平方向に)FluentFooterNavMenuFluentBodyContent
NavMenu.razorIcon="@(new Icons.Regular.Size24.Home())"Text="Home"Href="/" />Icon="@(new Icons.Regular.Size24.Calculator())"Text="Counter"Href="counter" />Icon="@(new Icons.Regular.Size24.Database())"Text="Fetch data"Href="fetchdata" />
デモ
今回使用したソースコード• https://github.com/tomokusaba/FluentUI3Sample
参考文献• Welcome to the Fluent UI Blazor componentslibrary• Microsoft Fluent UI Blazor components
おしまいおしまい
tomokusaba
afilina
techouse
niftycorp
miyuki2203
akkyie
yonetty
smt7174
rmatsuoka
os1ma
pocopota
paulrobertlloyd
sachag
jlugia
morganepeng
thoeni
jonrohan
thekraken
afnizarnur
skipperchong
aleyda
lauravandoore
eileencodes