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
370
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
130
Generative AI for Beginners .NETの紹介
tomokusaba
1
270
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
340
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
320
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
420
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
230
.NET Conf 2024の振り返り
tomokusaba
0
290
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
53
C#/.NETのこれまでのふりかえり
tomokusaba
1
260
Other Decks in Programming
See All in Programming
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
320
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
230
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
ニックトレイン登壇資料
ryotakurokawa
0
140
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
790
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
690
eBPF Updates (March 2025)
kentatada
0
130
OUPC2024 Day 1 解説
kowerkoint
0
390
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
2.9k
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
330
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
It's Worth the Effort
3n
184
28k
Adopting Sorbet at Scale
ufuk
75
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Typedesign – Prime Four
hannesfritz
41
2.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Into the Great Unknown - MozCon
thekraken
35
1.7k
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/)
おしまい おしまい