Blazor學習之旅 (8) MudBlazor組件庫介紹

【Blazor】|?總結/Edison Zhou

大家好，我是Edison。

為了實現一個Web應用系統，需要有個看起來不丑的UI，而對于.NET程序員來說要做全棧開發還是有點難，而本篇介紹的這個UI組件庫正好可以幫助我們解決這個問題！

MudBlaozr是啥

MudBlazor是一個基于Blazor的前端UI組件庫，它可以使.NET開發者使用C#語言快速地構建酷炫的Web應用。重點是，MudBlazor提供的UI組件真的還是蠻好看的，對于企業內部信息系統的開發綽綽有余，可以助力實現.NET開發者的全棧夢想。

MudBlazor官網：https://mudblazor.com/

MudBlazor在線嘗試：https://try.mudblazor.com/

MudBlazor主要提供了以下類型的組件，以官網介紹為準：

（1）基礎組件：顏色、圖標等；

（2）布局組件：容器、網格、工具欄等；

（3）按鈕組件：按鈕、圖標按鈕、按鈕組等；

（4）Input組件：表格、文本框、數字框、文件上傳、高亮、打分等常見效果；

（5）數據顯示組件：頭像、列表、卡片、分頁、Tab、時間線等；

（6）導航組件：鏈接、菜單、導航欄等；

（7）互動組件：進度條、提示欄、消息框等；

這里我們著重來看看常見的Table UI效果：

安裝配置MudBlazor

第一步，安裝MudBlazor包

dotnet add package MudBlazor

第二步，在_Imports.razor中添加MudBlazor的引用

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
.....
@using MudBlazor

第三步，在_Layout.cshtml中添加字體和樣式引用（如果是WebAssembly模式的話，則是在index.html中），同時注釋掉原有的site.css樣式文件引用。

<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="~/" /><!-- 以下為新添加的css引用 --><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" /><!-- 以下為原有的css引用 --><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /><!-- 以下為不再需要的css引用 -->@*<link href="css/site.css" rel="stylesheet" />*@......
</head>

第四步，在_Layout.cshtml底部添加MudBlazor的js腳本引用。

<script src="_framework/blazor.server.js"></script>
<!-- 以下為新添加的js腳本 -->
<script src="_content/MudBlazor/MudBlazor.min.js"></script>

第五步，在Program.cs中向IoC容器注入MudService。（.NET 6以下版本在StartUp.cs類中）

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

最后一步，在MainLayout.razor中添加以下組件：

@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />......

至此，MudBlazor組件庫的安裝配置工作就完成了，下一篇我們使用MudBlazor UI來重構之前的Todo應用。

小結

本篇，我們了解了MudBlazor這個強大的UI組件庫。

下一篇，我們就試著將之前的Todo應用使用MudBlazor來重構一下。

參考資料

MudBlazor官網

年終總結：Edison的2021年終總結

數字化轉型：我在傳統企業做數字化轉型

C#刷題：C#刷劍指Offer算法題系列文章目錄

.NET面試：.NET開發面試知識體系

.NET大會：2020年中國.NET開發者大會PDF資料

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/280675.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/280675.shtml
英文地址，請注明出處：http://en.pswp.cn/news/280675.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！