Blazor学习之旅(8)MudBlazor组件库介绍
大家好，我是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官网
Blazor学习之旅(8)MudBlazor组件库介绍的更多相关文章
- BootstrapBlazor 组件库介绍
项目介绍 演示系统地址:https://www.blazor.zone Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富 ...
- iOS学习笔记9 - 组件库介绍1
总算成功开发完了第一个较大的功能(即时通信).毕竟不可能什么东西都从轮子开始造,于是用到了一些组件,这里简单列举一下吧. 1. FMDB 作为一种文件型的数据存储方式,SQLite在iOS开发中自然也 ...
- Git学习笔记(一) 安装及版本库介绍
安装Git 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和 ...
- Ant Design Blazor 组件库的路由复用多标签页介绍
最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...
- Blazor 组件库开发指南
翻译自 Waqas Anwar 2021年5月21日的文章 <A Developer's Guide To Blazor Component Libraries> [1] Blazor 的 ...
- [翻译]怎么写一个React组件库（二）
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
- [翻译]怎么写一个React组件库（一）
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
- 使用VitePress搭建及部署vue组件库文档
每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和 ...
- Vitepress搭建组件库文档（上）—— 基本配置
在 vite 出现以前,vuepress 是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档.伴随着 vite 的发展,vitepress 已经到了 1.0.0-alpha.22 版本 ...
- Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 ...
随机推荐
- Effective Java理解笔记系列-第2条-何时考虑用构建器？
为什么写这系列博客? 在阅读<Effective Java>这本书时,我发现有许多地方需要仔细认真地慢慢阅读并且在必要时查阅相关资料才能彻底搞懂,相信有些读者在阅读此书时也有类似感受:同时 ...
- 常见行为面试题-Why do you want to work here?
Why do you want this job?/Why do you want to work here? Keys to answer the question Research the com ...
- redis那些数据类型？分别在那些场景使用
(1)string 这是最基本的类型了,没啥可说的,就是普通的set和get,做简单的kv缓存 例子:常规计数:微博数,粉丝数等 (2)hash 这个是类似map的一种结构,这个一般就是可以将结构化的 ...
- Visual Studio 2022 v17.13新版发布：强化稳定性和安全，助力 .NET 开发提效！
前言 今天大姚带领大家一起来看看 Visual Studio 2022 v17.13 新版发布都更新了哪些新功能,为我们开发工作带来了哪些便利,是否真的值得我们花费时间把 Visual Studio ...
- 一文搞懂Docker Compose
什么是Docker Compose Docker Compose 是 Docker 的一个编排管理工具,它允许你使用一个 YAML 文件来配置应用程序的服务.通过这个文件,你可以定义多个容器如何通过网 ...
- Joomla未授权访问漏洞|CVE-2023-23752复现及修复
00 前言 这漏洞公开有阵子了好像,今天才复现了下 Jooml 在海外使用较多,是一套使用 PHP 和 MySQL 开发的开源.跨平台的内容管理系统(CMS).Joomla 4.0.0 至 4.2 ...
- 读项目NeteaseCloudMusicGtk4
netease-cloud-music-gtk4 是基于 GTK4 + Libadwaita 构造的网易云音乐播放器,专为 Linux 系统打造,已在 openSUSE Tumbleweed + GN ...
- 【工具】没有人能拒绝这三种PDF阅读方式！打造良好的夜间PDF阅读环境，解放你的双眼！White is too harsh！
方式一和二都适用于常规的浏览器, 方式三是最最好用的PDF阅读器推荐. 方式一:f12改css 步骤一:打开开发者工具(f12). 步骤二:点击选择PDF所在元素,在style里面加一行filter: ...
- 【经验】VMware｜Win11的Ubuntu虚拟机启动虚拟化，报错此平台不支持虚拟化的 Intel VT-x/EPT（方案汇总+自己的解决方案）
2024/04/24说明:这篇暂时修改为粉丝可见,因为正在冲粉丝量,等到我弄完了粉丝量的要求,我就改回来!不方便看到全文的小伙伴不好意思!! 我开虚拟化是为了在虚拟机中运行VirtualBox,如果不 ...
- 正点原子ALPHA开发板使用4.3寸触摸屏LCD驱动实验显示不正常
显示问题 裸机开发时,驱动教程的PDF里给了4.3寸LCD屏幕的设置参数.如下图所示: 但是按照这个设置,编写设备树dts文件,下载到开发板里,却出现了显示异常,具体来说就是帧率不对,图和字都是歪斜的 ...