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
440
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
Azure Well-Architected Framework入門
tomokusaba
1
140
Microsoft Playwright Testing廃止!
tomokusaba
0
58
Azure Well-Architected Framework入門
tomokusaba
1
380
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
260
Azure Cloud Adoption Framework(計画編)
tomokusaba
1
99
速報Visual Studio 2026(Insiders)
tomokusaba
0
43
Cloud Adoption Framework(導入戦略)
tomokusaba
0
39
.NET開発者のためのAzureの概要
tomokusaba
0
320
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
530
Other Decks in Programming
See All in Programming
三者三様 宣言的UI
kkagurazaka
0
260
iOSでSVG画像を扱う
kishikawakatsumi
0
170
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
870
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
280
NIKKEI Tech Talk#38
cipepser
0
280
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
310
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
Ktorで簡単AIアプリケーション
tsukakei
0
110
CSC305 Lecture 11
javiergs
PRO
0
300
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
モテるデスク環境
mozumasu
3
1.3k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
RailsConf 2023
tenderlove
30
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Navigating Team Friction
lara
190
15k
What's in a price? How to price your products and services
michaelherold
246
12k
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/)
おしまい おしまい