Blazor学习之旅 (8) MudBlazor组件库介绍

b8e32aeab9d0bdd01a13a677f6766a29.jpeg

【Blazor】| 总结/Edison Zhou


大家好,我是Edison。

为了实现一个Web应用系统,需要有个看起来不丑的UI,而对于.NET程序员来说要做全栈开发还是有点难,而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题!

MudBlaozr是啥

MudBlazor是一个基于Blazor的前端UI组件库,它可以使.NET开发者使用C#语言快速地构建酷炫的Web应用。重点是,MudBlazor提供的UI组件真的还是蛮好看的,对于企业内部信息系统的开发绰绰有余,可以助力实现.NET开发者的全栈梦想。

efceed1d15dea4dab92d815809377ee7.png

MudBlazor官网:https://mudblazor.com/

MudBlazor在线尝试:https://try.mudblazor.com/

MudBlazor主要提供了以下类型的组件,以官网介绍为准:

(1)基础组件:颜色、图标等;

4ee998e237648895abee64950e4b4699.png

(2)布局组件:容器、网格、工具栏等;

bf29619a40117ccf3ba0e0e56f9195d1.png

(3)按钮组件:按钮、图标按钮、按钮组等;

7e9bf29d4d77fa4a00aecb9a37fdc808.png

(4)Input组件:表格、文本框、数字框、文件上传、高亮、打分等常见效果;

35a96545283bf18d7b6cd9a51578c0bc.png

(5)数据显示组件:头像、列表、卡片、分页、Tab、时间线等;

20ee2b1116b98f783b2878a8e5808992.png

(6)导航组件:链接、菜单、导航栏等;

8ee83d08e4d3e0593225b2c55ec26a3f.png

(7)互动组件:进度条、提示栏、消息框等;

bd71ce9526de831d60321b91711187e5.png

这里我们着重来看看常见的Table UI效果:

cee775c18a9764f8cffc9ca4454ac7de.png

ace6c46b92b39a55cfa00ea176399553.png

1beb00006d8d1e47137218981e08ee3d.png

安装配置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官网

570840162b26bdfc9937234299b312b3.gif

年终总结:Edison的2021年终总结

数字化转型:我在传统企业做数字化转型

C#刷题:C#刷剑指Offer算法题系列文章目录

.NET面试:.NET开发面试知识体系

.NET大会:2020年中国.NET开发者大会PDF资料

9131836797ae6b73a3dc56b15aad42bd.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280675.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

棉花糖多少钱_如何在6.0棉花糖及更高版本中访问Android的正在运行的应用程序列表...

棉花糖多少钱In Android 5.x and below, accessing your list of running apps was simple—you’d jump into Settings > Apps > Running. Easy! In Android 6.0, however, Google moved this setting. It’s still not super difficult to find, but it’s a little tr…

C# 程序图标设置/winform 图标

一、目的、实际情况 1.编写一个winform 程序&#xff0c;发现有一个图标非常有意义。区分其他程序&#xff0c;以及感觉在做产品而不是写代码。 2.添加图标图片发现&#xff0c;需要用ico格式。在线转换&#xff08;某度搜索&#xff09;还是不靠谱。要微信登陆&#xff0c;登…

数字化转型,究竟在“转”什么?

这是头哥侃码的第265篇原创「头哥唠B唠」这个栏目已经持续了几个月了&#xff0c;没想到还在继续进行&#xff0c;并收获了很多朋友们的喜爱。非常感谢大家的支持&#xff01;在上次的直播中&#xff0c;我找来了我的老熟人们。一个是右军老师&#xff0c;之前 APISIX 的很多内…

Crash 的文明世界

题目描述 给一棵树&#xff0c;求以每个点为根时下列式子的值。 题解 当k1时这就是一个经典的换根dp问题。 所以这道题还是要用换根dp解决。 部分分做法&#xff1a; 考虑转移时是这样的一个形式(图是抄的)。 用二项式定理展开就可以nk2做了。 观察到结果是一个xk的形式。 然后…

wampServer配置WWW根目录遇到的坑

直接在官网下载之后开始安装&#xff0c;一切正常 打开使用&#xff0c;一切正常 设置WWW目录。坑了一波 按照的都是百度上的教程&#xff0c;设置httpd.conf 这里配置之后网页访问127.0.0.1 还是localhost都还是原始的www目录 后来 我发现了这里 是配置虚拟URL的地方。以上是正…

windows安装程序创建_如何在Windows上创建已安装程序的列表

windows安装程序创建Reinstalling Windows is a good way to fix serious problems with your computer, or just to get a fresh slate. But before you reinstall Windows, you should make a list of programs you currently have installed on your PC so you know what yo…

实现一个更新所有 dotnet tool 的 dotnet tool

实现一个更新所有 dotnet tool 的 dotnet toolIntrodotnet tool 是从 .NET Core 2.1 开始支持的命令行工具&#xff0c;在使用 dotnet tool 比较多了的时候&#xff0c;想要更新所有的 dotnet tool 就比较麻烦&#xff0c;而目前 .NET SDK 还不支持&#xff0c;也有一些人希望能…

[AHOI2009]飞行棋 BZOJ1800

题目描述 给出圆周上的若干个点&#xff0c;已知点与点之间的弧长&#xff0c;其值均为正整数&#xff0c;并依圆周顺序排列。 请找出这些点中有没有可以围成矩形的&#xff0c;并希望在最短时间内找出所有不重复矩形。 输入输出格式 输入格式&#xff1a;第一行为正整数N&…

webapi+Quartz.NET解决若干定时程序同时运行的问题

项目现状&#xff1a; 有若干定时程序需要自启动运行&#xff0c;为了简便程序部署等问题&#xff0c;采取这种办法把定时程序集中管理到webapi中跟随api发布 代码架构介绍&#xff1a; 新建一个类库&#xff0c;类库引用Quartz&#xff08;Quartz.2.3.2&#xff09;&#xff0…

mac恢复iphone_免费下载:旧Mac和iPhone壁纸的令人震惊的完整档案

mac恢复iphoneLove or hate Apple, you’ve got to admit: their background images are consistently stunning. Now you can download all of them. 爱或恨苹果&#xff0c;您必须承认&#xff1a;它们的背景图像始终令人赞叹。 现在&#xff0c;您可以下载所有这些文件。 A …

Magicodes.IE 2.7.1发布

2.7.12022.12.01Magicodes.IE.EPPlus默认添加SkiaSharp.NativeAssets.Linux.NoDependencies包&#xff0c;以便于在Linux环境下使用导入验证支持将错误数据通过Stream的方式返回&#xff0c;感谢sampsonye &#xff08;见pr#466&#xff09;2.7.02022.11.07添加SkiaSharp移除Si…

Comcast以纯文本泄露客户Wi-Fi登录信息,立即更改密码

A Comcast Xfinity website was leaking Wi-Fi names and passwords, meaning now is a good time to change your Wi-Fi passcode. Comcast Xfinity网站泄漏了Wi-Fi名称和密码&#xff0c;这意味着现在是更改Wi-Fi密码的好时机。 The site, intended to help new customers se…

龙芯上跑WTM,为国产化做点贡献

点击上方蓝字关注我哦“信创”&#xff0c;是一项国家战略&#xff0c;即信息技术应用创新产业&#xff0c;它是数据安全、网络安全的基础&#xff0c;也是新基建的重要组成部分。信创从名称上来看本意指向创新&#xff0c;但是自从漂亮国亲手撕碎了“科技没有国界”的谎言之后…

PHP安装之configure的配置参数

1、生成环境安装配置如下 要求安装如下库&#xff1a; imagickgdmysqlmysqlimysqlndphalconPharsoapsocketsxwebxsvczipzlib 具体查看 vim php-config 就可以知道是如何配置的 --prefix/home/php --with-config-file-path/home/php/etc --with-mysql --with-pdo-oci --with-ope…

Django05: 请求生命周期流程图/路由层

请求生命周期流程图 扩展知识&#xff1a; 缓存数据库 路由层 路由匹配 url(r^test/, views.test), 1. 第一个参数是正则匹配。 只要第一个匹配了&#xff0c;就不会执行下面。 输入url会默认加斜杠&#xff0c;django会重定向 a. 一次匹配不行 b. url再加斜杠匹配 可以…

facebook 分享页面_Facebook个人资料,页面和组之间有什么区别?

facebook 分享页面Facebook is used by a lot of different people for a lot of different things, so it’s only natural that Facebook would have different sets of features for each of them. There are three main ways you can use Facebook: with a regular Profile…

一句话设计原则

面向对象的可复用设计&#xff08; Object Oriented Design / OOD&#xff09; 1. 开闭原则 (Open Closed Principle) 对扩展开放&#xff0c;对修改关闭 2. 里氏代换原则(LSP) 1.可以使用基类的地方&#xff0c;其子类必然也能使用 2.并且原功能不会受到任何影响 -- 经典案例,…

postman--安装及Interceptor插件

1. 官网安装&#xff08;看网速-我下载的时候一直下载失败&#xff09;打开官网&#xff0c;https://www.getpostman.com选择ios或者win 2. 非官网安装 https://pan.baidu.com/s/1mstsimqO3ZC5m9z8czxVnA 密码&#xff1a;q6yp 安装postman 3.需要安装分享的蓝灯安装包&#xf…

亚马逊标题自动抓取_如何为您的家人提供自动Amazon礼品卡津贴

亚马逊标题自动抓取When your kids move away to go to school, they’ll probably phone home every once in a while to ask for money. If they shop a lot on Amazon (and they probably do), you can expedite that process by setting up an automatically recurring dep…

我 与 TDesignBlazor 的故事

前言作者打拼了 .NET 十多年&#xff0c;属于全栈应用类型的工程师&#xff0c;特别是对于前端的技术情有独钟&#xff0c;从纯js到jquery&#xff0c;从bootstrap到自己写css&#xff0c;从web到winform&#xff0c;还写过一段时间的knockout.js&#xff0c;以至于公司里的前端…