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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
tomokusaba
February 02, 2024
Programming
0
580
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
プロダクトでもバイブコーディングしようぜ!
tomokusaba
0
20
M5Stackで猫耳光らせよう!
tomokusaba
0
94
コンピューティングリソース何を使えばいいの?
tomokusaba
1
36
Microsoft Agent Frameworkの可観測性
tomokusaba
1
150
.NET 10の概要
tomokusaba
0
150
.NET 10のASP.NET Coreの気になる新機能
tomokusaba
0
140
.NET 10のASP. NET Core注目の新機能
tomokusaba
0
200
コンピューティングリソース何を使えばいいの?
tomokusaba
1
240
技書博で見つけた本
tomokusaba
0
86
Other Decks in Programming
See All in Programming
Apache Iceberg V3 and migration to V3
tomtanaka
0
170
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
組織で育むオブザーバビリティ
ryota_hnk
0
180
AtCoder Conference 2025
shindannin
0
1.1k
AI時代の認知負荷との向き合い方
optfit
0
170
React Native × React Router v7 API通信の共通化で考えるべきこと
suguruooki
0
100
高速開発のためのコード整理術
sutetotanuki
1
410
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
ぼくの開発環境2026
yuzneri
0
250
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
210
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
150
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
Featured
See All Featured
Deep Space Network (abreviated)
tonyrice
0
66
Raft: Consensus for Rubyists
vanstee
141
7.3k
sira's awesome portfolio website redesign presentation
elsirapls
0
150
How STYLIGHT went responsive
nonsquared
100
6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
950
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
160
Code Review Best Practice
trishagee
74
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
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)
おしまい おしまい