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 企业级优雅实战 ...
随机推荐
- 【Linux】3.6 组管理和权限管理
组管理和权限管理 1. Linux组基本介绍 Linux中每个用户属于一个组,不能独立于组以外.所以在Linux中每个文件存在组的概念: 所有者 所在组 其他组 改变用户所在组 2. 文件/目录所有者 ...
- HTB打靶记录-TheFrizz
信息收集 nmap -sV -sC -O 10.10.11.60 Nmap scan report for 10.10.11.60 Host is up (0.63s latency). Not sh ...
- STM32_RTOS_V2编程模板1-消息队列
#pragma region QUEUE1 // 1DEFINE osMessageQueueId_t queueDemo1 = NULL; // 2INIT queueDemo1 = osMessa ...
- 使用Python计算汉密尔顿路径
引言 在图论中,汉密尔顿路径(Hamiltonian Path)是一个经典问题,它在很多实际应用中都有广泛的应用,如网络路由.旅行商问题等.今天,我们将一起探讨如何使用 Python 来计算汉密尔顿路 ...
- 详细介绍Dubbo的SPI机制
一.定义 Dubbo 的 SPI (Service Provider Interface) 机制是对 Java 原生 SPI 机制的增强和扩展,提供了更强大的扩展能力 二.Dubbo SPI 核心实现 ...
- 从 Excel 到你的表格应用：数据验证功能的嵌入实践指南
前言: 随着信息化的不断发展,传统表格软件已无法满足用户对便携性.数据自动化管理等日益复杂的要求,将电子表格与其他系统结合.开发自己的表格应用已成为愈发火热的趋势. 然而,当企业需要将 Excel 的 ...
- OneNote Embedded 文件滥用检测
本文分享自天翼云开发者社区<OneNote Embedded 文件滥用检测>,作者:Icecream 攻击技术 在这些网络钓鱼活动中被滥用的OneNote功能是在图片后面隐藏嵌入式文件,诱 ...
- JWT Token解析
参照:c#中token的使用方法实例_C#教程_脚本之家 (jb51.net) (7条消息) JWT 算法_み旋律的博客-CSDN博客_jwt算法
- Qt 官网开源最新版下载安装保姆级教程【2024-8-4 更新】
➤ 什么是Qt(了解请跳过) ➥ Qt 基本介绍 时至今日,Qt 已经经历了诸多变化.并且在未来,它也会不断地更新迭代.所以如果你想要更准确地了解 Qt,应该通过以下几种方法: ① 官方介绍 根据官方 ...
- Mybatis 框架课程第四天
目录 1 Mybatis 延迟加载策略 1.1 何为延迟加载 1.2 实现需求 1.3 使用 assocation 实现延迟加载 1.3.1 账户的持久层 DAO 接口 1.3.2 账户的持久层映射文 ...