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
410
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
GitHub Copilot の概要
tomokusaba
1
150
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
440
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
290
Part1 GitHubってなんだろう?その1
tomokusaba
3
940
Part1 GitHubってなんだろう?その2
tomokusaba
2
910
Part2 GitHub Copilotってなんだろう
tomokusaba
2
1k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
920
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
340
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
260
Other Decks in Programming
See All in Programming
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
260
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PicoRuby on Rails
makicamel
2
120
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
600
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
3
2.5k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
360
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
300
ふつうの技術スタックでアート作品を作ってみる
akira888
0
300
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Documentation Writing (for coders)
carmenintech
72
4.9k
Scaling GitHub
holman
459
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
How to Ace a Technical Interview
jacobian
277
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Being A Developer After 40
akosma
90
590k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Invisible Side of Design
smashingmag
300
51k
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/)
おしまい おしまい