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
330
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
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
210
.NET Conf 2024の振り返り
tomokusaba
0
250
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
35
C#/.NETのこれまでのふりかえり
tomokusaba
1
230
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
820
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
300
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
410
Semantic Kernelの最新状況及び入門
tomokusaba
0
300
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
400
Other Decks in Programming
See All in Programming
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
590
HTML/CSS超絶浅い説明
yuki0329
0
190
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
Amazon Nova Reelの可能性
hideg
0
200
ASP.NET Core の OpenAPIサポート
h455h1
0
110
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.7k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
300
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1k
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
550
Package Traits
ikesyo
1
210
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Building Applications with DynamoDB
mza
93
6.2k
The Invisible Side of Design
smashingmag
299
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
500
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
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/)
おしまい おしまい