作者:許薰尹 精誠資訊/恆逸教育訓練中心資深講師
Fluent UI Blazor 是一個由微軟開發的開源元件庫,可以讓程式開發人員在 Blazor 應用程式中使用 Fluent UI 來設計系統。Fluent UI 是一種設計套件,可幫助開發人員建立美觀、一致且易於使用的使用者介面。
Fluent UI Blazor 元件庫目前包含了超過 40 幾個元件,涵蓋了應用程式或網站中常見的使用者介面元素,例如按鈕、文字方塊、下拉式選單、表格、圖表等等。這些元件經過精心設計,可與 Fluent UI 設計系統的其餘部分無縫整合。
Fluent UI Blazor 元件庫的主要功能包括:
• 豐富的元件庫:包含超過 40 幾個常用元件,可滿足各種使用者介面需求。
• 易於使用:元件採用簡單易懂的 API,可快速上手,學習曲線短。
• 允許客製化:元件可根據需要進行客製化,以符合特定的設計的要求。
• 無障礙性:元件遵循無障礙性最佳做法,可供所有人使用。
Fluent UI Blazor 元件庫適用於以下場景:
• 建立新的 Blazor 應用程式。
• 將 Fluent UI 設計系統到用到現有的 Blazor 應用程式之中。
• 加速 Blazor 應用程式的使用者介面設計動作。
使用 Fluent UI Blazor 元件庫的優點包括:
• 可提高開發效率:使用現成的元件可節省開發時間和精力。
• 提升使用者體驗:Fluent UI 設計系統可幫助建立美觀、一致且易於使用的使用者介面。
• 降低維護成本:元件經過良好測試和維護,可降低應用程式的維護成本。
在這一篇文章中,我們將介紹一些適用於.NET 8,可在Blazor應用程式使用的Fluent UI元件基本功能。
安裝 Microsoft.FluentUI.AspNetCore.Templates套件
想要在Blazor應用程式之中開始使用 Fluent UI Blazor 元件進行設計的最簡單方法,就是利用官方提供的專案範本。專案範本可從以下網址下載:
https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates
請參考下圖所示: