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
360
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
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
210
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
260
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.1k
プロンプトエンジニアリング入門
tomokusaba
2
1.4k
Sementic Kernelのネイティブ関数について
tomokusaba
0
980
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
540
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
350
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
330
Sementic Kernelのネイティブ関数について
tomokusaba
0
330
Other Decks in Programming
See All in Programming
Server-Side目線で見る、Kotlin Festの楽しみ方
n_takehata
0
120
C++23 スタックトレースライブラリ
faithandbrave
0
120
A passwordless future! Passkeys for Spring Developers
deepu105
0
170
DroidKnights 2024 - Compose UI 컴포넌트 설계와 테스트
wisemuji
0
590
LTのやり方
yosuke_furukawa
PRO
13
1.6k
Spring Bootと行レベルセキュリティではじめるマルチテナントアーキテクチャ / Multi-tenant architecture using Row-Level Security
jaguar_imo
1
610
1BRC – Nerd Sniping the Java Community (Keynote JCon Slovenia)
gunnarmorling
1
160
[KR] 2024 DroidKnights: Compose 성능 최적화를 위한 Stability 마스터하기
skydoves
0
660
時系列基盤モデルの世界 / The World Of Time Series Foundation Models
rkaga
3
1.5k
Navigating Generative AI: A Developer's Guide
alperhankendi
0
220
앱 성능 영혼까지 끌어올리기
veronikapj
0
630
Ruby と Rails の小ネタ集
daisukeshinoku
2
150
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
27
1.7k
The Art of Programming - Codeland 2020
erikaheidi
46
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
34
47k
Building Your Own Lightsaber
phodgson
101
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
243
1.2M
Facilitating Awesome Meetings
lara
44
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
75
8.3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Music & Morning Musume
bryan
42
5.7k
Become a Pro
speakerdeck
PRO
13
4.7k
The World Runs on Bad Software
bkeepers
PRO
62
9k
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)
おしまい おしまい