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の新しいComponentについて
Search
tomokusaba
February 02, 2024
Programming
0
510
Fluent UI Blazorの新しいComponentについて
Fluent UI Blazorの新しいComponentについて
Fukuoka.NET Conf 2023
https://fukuten.connpass.com/event/303390/
tomokusaba
February 02, 2024
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
380
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
220
.NET Conf 2024の振り返り
tomokusaba
0
270
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
48
C#/.NETのこれまでのふりかえり
tomokusaba
1
250
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
840
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
310
Other Decks in Programming
See All in Programming
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Open source software: how to live long and go far
gaelvaroquaux
0
650
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
バッチを作らなきゃとなったときに考えること
irof
1
410
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
Introduction to kotlinx.rpc
arawn
0
740
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
830
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
790
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Docker and Python
trallard
44
3.3k
Rails Girls Zürich Keynote
gr2m
94
13k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Music & Morning Musume
bryan
46
6.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
How STYLIGHT went responsive
nonsquared
98
5.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
Fluent UI Blazorの新しい Componentについて 株式会社SAKURUG プロダクトDiv 草場 友光 Fukuoka .NET
Conf
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2024 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • Fluent UI Blazor 4.4.0(2023/02/03
1:09 JST Release)に基づいています。
今日の目的 • Fluent UI Blazorに次々とあらたなComponentが実装され ています。 • 今回は新たに実装されたWizardとSortableListについて紹介 します。
Fluent UI Blazorとは? • Microsoftの提唱する新しいデザインシステムであるFluent UIのBlazorラッパーです。 • ただ単に、UI部品を提供するのみならずそれぞれのUI部品の使 用法が規定され文章として公開されている。
Wizardとは? • 複雑なタスクを分解してステップバイステッ プにするユーザーインターフェイス
Wizardの問題点 • ステップを進めるボタンがデフォルトでは英語表記! • 日本人としては日本語で使いたいところ • 解決法1) static フィールドのLabelButtonPrevious、 LabelButtonNext、LabelButtonDoneにそれぞれラベル表記を設
定する • 解決方法2) ButtonTemplateプロパティを使用する
念ため なんでプロパティーにParameter属性つけない の?って思ったけども これだと、アプリケーションのWizard全体で共通 のラベルってことになるので一部だけ変えたいと いうのはできないよねえ。。。。
ButtonTemplate • Wizardのボタンをフルカスタマイズすることができる。 • RenderFragment<int> ButtonTemplate intはウィザードの進行ステップを表す数値 • ステップが進行するたびに起こるOnChangeイベントやWizard が終了した時に起きるOnFinishイベントはButtonTemplate
を使用したときは発生しない。 必要であれば自力で実装する必要がある。
デモ
SortableList v4.40(New) • ドラッグドラッグで1つ以上のリストを対象に並び替えができるリ スト • 1つのリストの並び替えだと使いどころは限られる印象。 • 2つのリストを入れ替えるとともに並び替えができるとなるとさ まざまな場面で使えそう!
デモ
参考文献 • Design principles (https://fluent2.microsoft.design/design- principles) • Welcome to the
Fluent UI Blazor components library (https://www.fluentui-blazor.net)
おしまい おしまい