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资料
Blazor学习之旅 (8) MudBlazor组件库介绍相关推荐
- 小猪的Python学习之旅 —— 13.文字识别库pytesseract初体验
小猪的Python学习之旅 -- 13.文字识别库pytesseract初体验 标签:Python 引言 度过了短暂的春节假期,又要开始继续搬砖了,因为还处于节后 综合征,各种散漫,不想看任何代码相关 ...
- 十多款优秀的Vue组件库介绍
十多款优秀的Vue组件库介绍 1. iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.iView的组件还是比较齐全的,更新也很快, ...
- Vue学习二:安装element-ui组件库
上一章:搭建Vue环境 搭建完vue环境后,安装element-ui使用其组件库,提高开发效率. 1.打开cmd,cd到在项目目录下 执行npm install element-ui,安装完成后,查看 ...
- 前端学习(2387):组件库使用说明
main.js import Vue from 'vue' import App from './App.vue' import router from './router' import './st ...
- 【Alljoyn】 Alljoyn学习笔记七 Alljoyn瘦客户端库介绍
Alljoyn瘦客户端库介绍(上) 1.简介 本文档对AllJoynTM瘦客户端的核心库文件(AJTCL)进行了详尽的介绍.本文档介绍了系统整体架构,AllJoyn框架结构,并着重于介绍如何将嵌入式设 ...
- Vue前端组件库介绍
kb-vue-components 组件库平台介绍 这里汇集大家常用的Vue组件, 并提供相应组件的使用教程. 方便你找到适合自己的组件,并快速上手使用. 开源项目地址: kb-vue-compone ...
- vue组件库介绍以及组件库Element UI 的使用
组件库 前言 这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库 在实际开发中,前端 ...
- Chakra-UI组件库介绍
Chakra-UI是一个现代化React UI框架.它是用来构建用户界面的. Chakra-UI是一个简单的.模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的UI组件. 其优点有下面 ...
- Blazor学习之旅(5)数据绑定
[Blazor]| 总结/Edison Zhou 大家好,我是Edison. 最近在学习Blazor做全栈开发,因此根据老习惯,我会将我的学习过程记录下来,一来体系化整理,二来作为笔记供将来翻看. 本 ...
最新文章
- Linux下的qt5.7Qftp类,[翻译] Qt QFtp功能无法被Qt 5 Network系列模块替代的说明
- QT实现PhotoSurface
- Python title() 方法
- HDU 1384 Intervals【差分约束-SPFA】
- 发现自己的代码写的越来越玄幻了
- 大文本存mysql怎么建索引_如何正确合理的建立MYSQL数据库索引
- android ArcGIS学习笔记一
- lcc-win32使用指南
- c++真的比java难吗_开课吧Java课程怎么样?开课吧的Java课程真的那么好吗?
- oracle 会话状态,oracle 常用状态sql
- 算法:Design Circular Deque(设计一个双端队列)
- questasim仿真优化加速问题(object无信号,无法看波形,(vsim-12110) All optimizations are disabled,error loading design)
- 华硕ASUS RT-AC66U无线路由器部署NTP Server最佳实践
- 代码面试最常用的10大算法(四)
- jquery canvas网页画布画图
- 每日刷题:lightoj-1004 - Monkey Banana Problem
- cursor的所有样式
- 巴拉克·奥巴马总统就职演说
- 淘客漏洞群用的什么机器人_目前淘客返利机器人是不是很火,大家都是用什么返利机器人的?...
- 计算机的开机自检是在 里完成的,计算机的开机自检是在()里完成的。