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
550
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
GitHub Copilot の概要
tomokusaba
1
160
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
490
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
300
Part1 GitHubってなんだろう?その1
tomokusaba
3
960
Part1 GitHubってなんだろう?その2
tomokusaba
2
930
Part2 GitHub Copilotってなんだろう
tomokusaba
2
1.1k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
930
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
340
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
270
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
7
2.4k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
PicoRuby on Rails
makicamel
2
140
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
GPUを計算資源として使おう!
primenumber
1
250
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Fireside Chat
paigeccino
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Embracing the Ebb and Flow
colly
86
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Why Our Code Smells
bkeepers
PRO
337
57k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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)
おしまい おしまい