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 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)

おしまい おしまい