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
260
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
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
270
Semantic Kernelの最新状況及び入門
tomokusaba
0
190
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
310
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
300
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.4k
プロンプトエンジニアリング入門
tomokusaba
2
1.7k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1.1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
810
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
380
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
1
470
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Jakarta EE meets AI
ivargrimstad
0
380
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.9k
How to Break into Reading Open Source
kaspth
2
210
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
2024 컴포즈 정원사
jisungbin
0
150
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
実践!難読化ガイド
mitchan
0
160
Swiftコードバトル必勝法
toshi0383
0
150
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
760
マルチモジュールにおけるテスト最適化
fxwx23
0
210
Featured
See All Featured
What the flash - Photography Introduction
edds
67
11k
Ruby is Unlike a Banana
tanoku
96
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Rails Girls Zürich Keynote
gr2m
93
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Optimizing for Happiness
mojombo
375
69k
Gamification - CAS2011
davidbonilla
79
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Building an army of robots
kneath
302
42k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Side Projects
sachag
451
42k
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/)
おしまい おしまい