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
280
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
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
670
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
240
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
320
Semantic Kernelの最新状況及び入門
tomokusaba
0
220
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
330
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
310
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.4k
プロンプトエンジニアリング入門
tomokusaba
3
1.7k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1.1k
Other Decks in Programming
See All in Programming
知られざるNaNの世界
hole
3
1k
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
320
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
CSC509 Lecture 03
javiergs
PRO
0
150
C#および.NETに対する誤解をひも解く
ymd65536
0
330
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
180
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
1.3k
テスト駆動開発✅️
akitoshiga
1
150
sqlcを利用してsqlに型付けを
kamiyam
0
250
いかにして不足・不整合なくデータ移行したか
tjmtmmnk
1
570
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
130
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Writing Fast Ruby
sferik
626
60k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
How to Think Like a Performance Engineer
csswizardry
18
1k
GitHub's CSS Performance
jonrohan
1030
450k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Modern Web Designer's Workflow
chriscoyier
692
190k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
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/)
おしまい おしまい