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
450
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
C#/.NETのこれまでのふりかえり
tomokusaba
1
140
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
700
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
250
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
330
Semantic Kernelの最新状況及び入門
tomokusaba
0
220
Fluent UI Blazor 最新Update
tomokusaba
1
280
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
330
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
310
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.4k
Other Decks in Programming
See All in Programming
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
0
1.2k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
350
qmuntal/stateless のススメ
sgash708
0
100
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.2k
Golang と Erlang
taiyow
8
1.8k
今日で分かる!カスタムコップの作り方
krpk1900
2
360
Server Driven Compose With Firebase
skydoves
0
320
僕がつくった48個のWebサービス達
yusukebe
17
16k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
4
1.5k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.6k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
1.6k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
13
3.6k
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Thoughts on Productivity
jonyablonski
67
4.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
140
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
280
Measuring & Analyzing Core Web Vitals
bluesmoon
0
27
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
A Tale of Four Properties
chriscoyier
156
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
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)
おしまい おしまい