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
150
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のすすめ
tomokusaba
1
230
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
270
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.1k
プロンプトエンジニアリング入門
tomokusaba
2
1.4k
Sementic Kernelのネイティブ関数について
tomokusaba
0
990
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
580
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
360
Fluent UI Blazorの新しいComponentについて
tomokusaba
0
370
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
330
Other Decks in Programming
See All in Programming
KotlinのLinter まなびなおし2024
nyafunta9858
0
1.8k
「ナントカLR」を整理する / Clarifying LR Algorithms
junk0612
1
150
イベント駆動アーキテクチャ導入の手引きと共通の落とし穴 / Guide to Implementing Event-Driven Architecture and Common Pitfalls
nrslib
12
4k
ボトムアップではじめるFour Keys・SPACEを用いた開発プロセスの改善事例 〜開発生産性に向き合ってチームの成長を実感する〜
nomuson
1
250
関数型プログラミングへの第一歩: 純粋関数を知る
74k3z4k1
0
120
スクラムチームに入れないという選択: フルサイクルチームにおける開発者のステップアップ / Why We Don’t Add Newbies to Our Scrum Team
yuk4w4
3
1.5k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
120
えにしテック、あるいは人間関係のエクササイズ / #enishitech-15th-anniv
kakutani
7
540
Converting AST
yui_knk
4
160
設計の考え方 - インターフェースと腐敗防止層編 #phpconfuk / Interface and Anti Corruption Layer
okashoi
7
1.6k
奥が深いメールのシステム / The depth of Email system
linyows
3
210
アプリケーションをリプレイスしたら チームとサービス運用に向き合えた
kazatohiei
1
320
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
18
2.8k
The Language of Interfaces
destraynor
151
23k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Building Effective Engineering Teams - LeadDev
addyosmani
42
2.1k
Facilitating Awesome Meetings
lara
44
5.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
Ruby is Unlike a Banana
tanoku
96
10k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.3k
What's in a price? How to price your products and services
michaelherold
238
11k
Fireside Chat
paigeccino
24
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
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/)
おしまい おしまい