MudBlazor：一個UI簡潔美觀漂亮的Blazor開源元件！

2024-05-20碼農

Blazor，作為.NET生態系中的一個革命性框架，使得可以使用C#來全棧開發Web套用。下面推薦一個Blazor開源UI元件MudBlazor，方便我們快速開發。

計畫簡介

MudBlazor 是一個開源的 .NET 庫，它為 Blazor 應用程式提供了一套豐富的 Material Design 風格的元件。MudBlazor提供了一套完整的元件庫，使得開發者能夠快速構建美觀且功能豐富的使用者介面。

計畫特點

Material Design 風格：遵循 Material Design 設計語言，這是由 Google 提出的一種視覺語言，它指導了如何設計出直觀、一致且美觀的界面。
元件豐富：提供了 50 多個預構建的元件，包括按鈕、表單控制項、導航選單、數據表格、卡片等，這些元件都遵循 Material Design 規範。
易於使用：元件使用簡單，方便我們快速地在 Blazor 應用程式中使用。
高度可客製：元件支持高度客製，方便我們根據計畫需求調整元件的樣式和行為。
跨平台：由於 Blazor 本身的跨平台特性，MudBlazor 元件可以在 WebAssembly (WASM) 或伺服器端的 Blazor 應用程式中執行。

使用方法

1、安裝依賴庫

dotnet add package MudBlazor

2、在_Imports.razor參照

@using MudBlazor

3、在頁面，添加字型和樣式參照

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel=" stylesheet" /><link href="_content/MudBlazor/MudBlazor.min.css" rel=" stylesheet" />

4、添加JavaScript參照

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

5、在計畫入口Program.cs註冊服務

using MudBlazor.Services;builder.Services.AddMudServices();

6、在MainLayout.razor添加以下元件

<MudThemeProvider/><MudDialogProvider/><MudSnackbarProvider/>

至此MudBlazor計畫配置完成，接下去就可以根據計畫需求進行開發了。

範例效果圖