Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fluent UI Blazor 最新Update
Search
tomokusaba
June 22, 2024
Programming
1
380
Fluent UI Blazor 最新Update
Fluent UI Blazor 最新Update
.NETラボ 勉強会 2024年6月 LT
https://dotnetlab.connpass.com/event/320403/
tomokusaba
June 22, 2024
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
180
Generative AI for Beginners .NETの紹介
tomokusaba
1
280
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
370
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
340
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
430
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
240
.NET Conf 2024の振り返り
tomokusaba
0
300
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
55
C#/.NETのこれまでのふりかえり
tomokusaba
1
270
Other Decks in Programming
See All in Programming
AIコーディングの理想と現実
tomohisa
20
27k
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
120
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
500
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
List とは何か? / PHPerKaigi 2025
meihei3
0
860
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
380
Sharing features among Android applications: experience feedback
jbvincey
0
110
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
800
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
100
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.2k
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Documentation Writing (for coders)
carmenintech
69
4.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
For a Future-Friendly Web
brad_frost
176
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Code Review Best Practice
trishagee
67
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Building an army of robots
kneath
304
45k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
4 Signs Your Business is Dying
shpigford
183
22k
Transcript
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指定できる ようになった • 従来、全体の幅からの相対的な割合しか指定できなかった • 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/)
おしまい おしまい