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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
Oxlintはいいぞ
yug1224
5
1.4k
CSC307 Lecture 09
javiergs
PRO
1
840
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
150
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
260
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
Fluid Templating in TYPO3 14
s2b
0
130
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
200
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
500
Featured
See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
Designing Powerful Visuals for Engaging Learning
tmiket
0
240
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Bash Introduction
62gerente
615
210k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
280
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
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)
おしまい おしまい