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
270
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
0
26
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
290
Semantic Kernelの最新状況及び入門
tomokusaba
0
200
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
320
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
300
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.4k
プロンプトエンジニアリング入門
tomokusaba
3
1.7k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1.1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
830
Other Decks in Programming
See All in Programming
So you want to write a User-Defined Function for Flink? @ Current 2024 - Austin, TX
hpgrahsl
0
110
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
260
Flutterアプリを生成AIで生成する勘所
rizumita
0
220
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
220
上手に付き合うコンポーネントテスト
quramy
3
1.1k
Removing Corepack
yosuke_furukawa
PRO
6
700
#TROCCOUG dbt Cloud+TROCCO
troccoug
0
140
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
410
Beyond the RuboCop Defaults
koic
2
350
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
330
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
850
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
160
Featured
See All Featured
What's new in Ruby 2.0
geeforr
340
31k
The Invisible Side of Design
smashingmag
296
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Web development in the modern age
philhawksworth
205
10k
Making the Leap to Tech Lead
cromwellryan
129
8.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Teambox: Starting and Learning
jrom
131
8.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
2
180
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/)
おしまい おしまい