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
270
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
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
60
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
800
プロンプトエンジニアリング入門
tomokusaba
2
1.2k
Sementic Kernelのネイティブ関数について
tomokusaba
0
920
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
380
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
330
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
310
Sementic Kernelのネイティブ関数について
tomokusaba
0
270
Semantic Kernelのすすめ
tomokusaba
0
230
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
60
29k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
430
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
120
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
2
130
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
PHPはいつから死んでいるかの調査
chiroruxx
1
400
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Milestoner
bkuhlmann
1
410
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Fast JSX: Don't clone props object #28768
yossydev
1
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
A better future with KSS
kneath
231
16k
Gamification - CAS2011
davidbonilla
76
4.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
How to name files
jennybc
65
93k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Fireside Chat
paigeccino
21
2.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)
おしまい おしまい