Fluent UI Blazorの新しいComponentについて

Fluent UI Blazorの新しいComponentについて
Fukuoka.NET Conf 2023
https://fukuten.connpass.com/event/303390/

Transcript

1. Fluent UI Blazorの新しい Componentについて 株式会社SAKURUG プロダクトDiv 草場 友光 Fukuoka .NET Conf
2. 自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2024 Microsoft MVP (Developer Technologies) • tomo_kusaba
3. 宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
4. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • Fluent UI Blazor 4.4.0(2023/02/03 1:09 JST Release)に基づいています。
5. 今日の目的 • Fluent UI Blazorに次々とあらたなComponentが実装され ています。 • 今回は新たに実装されたWizardとSortableListについて紹介 します。
6. Fluent UI Blazorとは？ • Microsoftの提唱する新しいデザインシステムであるFluent UIのBlazorラッパーです。 • ただ単に、UI部品を提供するのみならずそれぞれのUI部品の使 用法が規定され文章として公開されている。
7. Wizardとは？ • 複雑なタスクを分解してステップバイステッ プにするユーザーインターフェイス
8. Wizardの問題点 • ステップを進めるボタンがデフォルトでは英語表記！ • 日本人としては日本語で使いたいところ • 解決法1） static フィールドのLabelButtonPrevious、 LabelButtonNext、LabelButtonDoneにそれぞれラベル表記を設 定する • 解決方法2) ButtonTemplateプロパティを使用する
9. 念ため なんでプロパティーにParameter属性つけない の？って思ったけども これだと、アプリケーションのWizard全体で共通 のラベルってことになるので一部だけ変えたいと いうのはできないよねえ。。。。
10. ButtonTemplate • Wizardのボタンをフルカスタマイズすることができる。 • RenderFragment<int> ButtonTemplate intはウィザードの進行ステップを表す数値 • ステップが進行するたびに起こるOnChangeイベントやWizard が終了した時に起きるOnFinishイベントはButtonTemplate を使用したときは発生しない。 必要であれば自力で実装する必要がある。
11. デモ
12. SortableList v4.40(New) • ドラッグドラッグで1つ以上のリストを対象に並び替えができるリ スト • 1つのリストの並び替えだと使いどころは限られる印象。 • 2つのリストを入れ替えるとともに並び替えができるとなるとさ まざまな場面で使えそう！
13. デモ
14. 参考文献 • Design principles (https://fluent2.microsoft.design/design- principles) • Welcome to the Fluent UI Blazor components library (https://www.fluentui-blazor.net)
15. おしまい おしまい