Fluent UI Blazor 最新Update

Fluent UI Blazor 最新Update 株式会社SAKURUG プロダクトDiv 草場友光 .NETラボ勉強会2024年5月6月

今日の目的 • Fluent UI Blazorは最もUpdateの激しいOSSの一つです。 • 今回は、2月3日のFukuoka .NET Conf以降のUpdateについて語っていこうと思います。

今回紹介するサマリー • V4.5.0(3/8) • .NET AspireのApp Bar追加 • V4.6.0（3/29) •
KeyCodeProviderがGlobalのキーボードキャプチャーできるサービスとして追加 • KeyCodeがKeyDownやKeyUpのイベントをキャプチャーできるコンポーネントとして追加 • PulltoRefresh追加 • V4.7.0（4/23） • DataGridでカラムの幅がpx指定できるようになった • DataGridのカラムの幅がキーボードで変更できるようになった（アクセシビリティ） • V4.7.2(5/3) • DataGridで行を複数選択できるようになった

今回のデモサイト • https://dotnetlab202405.musewiki.net/

Fluent UI Blazorとは？ • Microsoftが推進しているデザインシステムFluent UIの Blazorラッパー • 多くは、Fluent UI
Webコンポーネントのラッパーとして実装 • いくつかのコンポーネントはFluent Design Systemを活用したコンポーネント

.NET AspireのApp Bar追加 • Teamsや.NET Aspireの左側メニューで採用されているApp Barコンポーネントが追加された • Fluent
UI BlazorではNavMenuTreeおよび NavMenuLinkに並び左側メニューの第2の選択肢

KeyCodeProviderがGlobalのキーボードキャプチャーできるサービスとして追加 • 現在のページでグローバルにキーストロークをキャプチャーするサービス • MainLayout.razorにFluentKeycodeProviderを追加 • キャプチャーしたいページにIKeyCodeServiceをInject •
IAsyncDisposableをimplements • OnInialiezedでキーをキャプチャーするメソッドを登録 • DisposeAsyncでキーをキャプチャーするメソッドを解放 • キーをキャプチャーするメソッドに処理を書く！！

KeyCodeがKeyDownやKeyUpのイベントをキャプチャーできるコンポーネントとして追加 • コンポーネントに入力されたキーをキャプチャー • FluentKeyCodeコンポーネントを使用 • OnKeyDownコールバックでキーをキャプチャー •
FluentKeyCodeEventArgs引数によってどのキーが押されたか判別

PullToRefresh追加 • 主にモバイル向けのコンポーネント • 画面を下にドラッグして放すことでコンポーネントの内容を更新するようにアプリケーションに通知する機能 • 更新ボタンを設置するより画面スペースを節約することが目的

DataGridでカラムの幅がpx指定できるようになった • 従来、全体の幅からの相対的な割合しか指定できなかった • ｐｘ指定ができるようになったことにより日付など全体を表示させたい項目を表示できるようになった • オーバフローして表示しきれない項目はデフォルトでは右側に突き抜けてしまうので注意

DataGridのカラムの幅がキーボードで変更できるようになった（アクセシビリティ） • DataGridのヘッダー行にフォーカスがあたった状態で「＋」と「ー」でカラムの幅を変更できるようになった。 • もとの幅に戻すにはShift＋R • 矢印キーでカラムの移動が可能になっている

DataGridで行を複数選択できるようになった • 今まではカラムにボタンを配置するなどして単一行の操作しかできなかった。 • チェックボックスを配置して複数行の操作が簡単にできるようになった。

参考文献 • https://github.com/microsoft/fluentui- blazor/releases • Welcome to the Fluent UI
Blazor components library （https://www.fluentui-blazor.net/）

おしまいおしまい

Fluent UI Blazor 最新Update

Fluent UI Blazor 最新Update

tomokusaba

More Decks by tomokusaba

Other Decks in Programming

Featured

Transcript