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

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)

おしまいおしまい

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

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

tomokusaba

More Decks by tomokusaba

Other Decks in Programming

Featured

Transcript