MudBlazor:一个UI简洁美观漂亮的Blazor开源组件!

news2024/9/25 10:53:26

Blazor,作为.NET生态系统中的一个革命性框架,使得可以使用C#来全栈开发Web应用。下面推荐一个Blazor开源UI组件MudBlazor,方便我们快速开发。

01 项目简介

MudBlazor 是一个开源的 .NET 库,它为 Blazor 应用程序提供了一套丰富的 Material Design 风格的组件。MudBlazor提供了一套完整的组件库,使得开发者能够快速构建美观且功能丰富的用户界面。

02 项目特点

  1. Material Design 风格:遵循 Material Design 设计语言,这是由 Google 提出的一种视觉语言,它指导了如何设计出直观、一致且美观的界面。

  2. 组件丰富:提供了 50 多个预构建的组件,包括按钮、表单控件、导航菜单、数据表格、卡片等,这些组件都遵循 Material Design 规范。

  3. 易于使用:组件使用简单,方便我们快速地在 Blazor 应用程序中使用。

  4. 高度可定制:组件支持高度定制,方便我们根据项目需求调整组件的样式和行为。

  5. 跨平台:由于 Blazor 本身的跨平台特性,MudBlazor 组件可以在 WebAssembly (WASM) 或服务器端的 Blazor 应用程序中运行。

03 使用方法

1、安装依赖库

dotnet add package MudBlazor

2、在_Imports.razor引用

@using MudBlazor

3、在页面,添加字体和样式引用

<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" />

4、添加JavaScript引用

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

5、在项目入口Program.cs注册服务

using MudBlazor.Services;

builder.Services.AddMudServices();

6、在MainLayout.razor添加以下组件

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

至此MudBlazor项目配置完成,接下去就可以根据项目需求进行开发了。

04 示例效果图

图片

05 组件类别

基础

图片

布局

图片

按钮

图片

输入框

图片

列表

图片

导航

图片

提示框/反馈

图片

样式组件

图片

06 项目地址

https://github.com/MudBlazor/MudBlazor

- End -

更多开源项目: https://github.com/bianchenglequ/NetCodeTop

我是编程乐趣,一个.Net开发经验老程序员,欢迎“关注”我,每天为你分享开源项目和编程知识。
也欢迎加入【.Net技术编程交流社区】,和大家共同学习交流!,点击加入:https://bbs.csdn.net/topics/613465368

推荐阅读

推荐一个C#操作SVG图形矢量图的开源项目

推荐一个C#开发的窗口扩展菜单,支持系统所有窗口

NetCore多租户开源项目,快速后台开发企业框架,赚钱就靠她了

推荐一个.Net Core开发的Websocket群聊、私聊的开源项目

基于.Net Core开源的库存订单管理系统

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

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

相关文章

Java JUC(二) Synchronized 基本使用与核心原理

Java JUC&#xff08;二&#xff09; Synchronized 基本使用与核心原理 随着 Java 多线程开发的引入&#xff0c;程序的执行效率和速度都取得了极大的提升。但此时&#xff0c;多条线程如果同时对一个共享资源进行了非原子性操作则可能会诱发线程安全问题&#xff0c;而线程安全…

前端报错401 【已解决】

前端报错401 【已解决】 在前端开发中&#xff0c;HTTP状态码401&#xff08;Unauthorized&#xff09;是一个常见的错误&#xff0c;它表明用户试图访问受保护的资源&#xff0c;但未能提供有效的身份验证信息。这个错误不仅关乎用户体验&#xff0c;也直接关系到应用的安全性…

JAVA开源项目 学科竞赛管理系统 计算机毕业设计

本文项目编号 T 047 &#xff0c;文末自助获取源码 \color{red}{T047&#xff0c;文末自助获取源码} T047&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

修牛蹄视频哪里找?修牛蹄的解压视频素材网站分享

在现代农业和畜牧业中&#xff0c;牛蹄修剪技术的重要性不言而喻&#xff0c;不仅直接关联到牲畜的健康&#xff0c;也对农场的整体经济收益产生巨大影响。对于新手畜牧工作者而言&#xff0c;挑选出优秀的学习资源尤为关键。今天&#xff0c;我将为大家推荐几个提供优质牛蹄修…

烤羊肉串引来的思考——命令模式

文章目录 烤羊肉串引来的思考——命令模式吃烤羊肉串&#xff01;烧烤摊vs.烧烤店紧耦合设计命令模式松耦合设计进一步改进命令模式命令模式的作用 烤羊肉串引来的思考——命令模式 吃烤羊肉串&#xff01; 时间&#xff1a;6月23日17点  地点&#xff1a;小区门口  人物…

企业EMS -能源管理系统-能源在线监测平台

一、介绍 基于SpringCloud的能管管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管管理系统源码 二、软件架构 二、功能介绍 三、数字大屏展示 四、数据采集原理 五、软件截图

在不受支持的 Mac 上安装 macOS Sequoia (OpenCore Legacy Patcher v2.0.1)

在不受支持的 Mac 上安装 macOS Sequoia (OpenCore Legacy Patcher v2.0.1) Install macOS on unsupported Macs 请访问原文链接&#xff1a;https://sysin.org/blog/install-macos-on-unsupported-mac/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主…

吉客云与金蝶云星空对接集成分页查询货品信息连通[标准]

吉客云与金蝶云星空对接集成分页查询货品信息连通[标准][付款单新增]-v1(付款单) 对接系统&#xff1a;吉客云 “吉客云”是一站式企业数字化解决方案系统&#xff0c;可实现业务、财务、办公、人事等一体化管理。相对于传统多套软件系统的集成方案&#xff0c;“吉客云”具有业…

剖析:基于 RDMA 的多机数据分发和接收场景

在基于 RDMA 的多机数据分发和接收场景中&#xff0c;数据的传输主要依赖于以下几个步骤和角色&#xff1a; 机器 A&#xff08;发送方&#xff09;&#xff1a;通过 RDMA 将数据直接写入远程机器的内存中。机器 B&#xff08;接收方&#xff09;&#xff1a;接收数据&#xf…

关于 NLP 应用方向与深度训练的核心流程

文章目录 主流应用方向核心流程&#xff08;5步&#xff09;1.选定语言模型结构2.收集标注数据3.forward 正向传播4.backward 反向传播5.使用模型预测真实场景 主流应用方向 文本分类文本匹配序列标注生成式任务 核心流程&#xff08;5步&#xff09; 基本流程实现的先后顺序…

ShardingSphere 分库分表

中间件 常用中间件 MyCat 是基于 Proxy&#xff0c;它复写了 MySQL 协议&#xff0c;将 Mycat Server 伪装成⼀个 MySQL 数据库客户端所有的jdbc请求都必须要先交给MyCat&#xff0c;再有 MyCat转发到具体的真实服务器缺点是效率偏低&#xff0c;中间包装了⼀层代码⽆侵⼊性…

解决Android Studio 右上角Gradle不显示task

解决Android Studio 右上角Gradle不显示task_gradle中没有build task-CSDN博客 不正常的情况下 正常的情况下 解决方案 依次点击&#xff1a;File -> Settings -> Experimental -> 取消勾选 “Do not build Gradle task list during Gradle sync” 同步项目即可

[数据集][目标检测]基于yolov5增强数据集算法mosaic来扩充自己的数据集自动生成增强图片和对应标注无需重新标注

【算法介绍】 YOLOv5最引人注目的增强技术之一是马赛克增强&#xff0c;它将四张不同的图像拼接成一张图像。 思路&#xff1a;首先&#xff0c;从数据集中随机选择四张图像&#xff0c;然后将它们缩放、随机裁剪&#xff0c;并按马赛克模式拼接在一起。这种方式允许模型看到…

【逐行注释】MATLAB的程序,对比EKF(扩展卡尔曼滤波)和PF(粒子滤波)的滤波效果,附下载链接

文章目录 总述部分源代码运行结果扩展性 总述 本代码使用 M A T L A B MATLAB MATLAB实现了扩展卡尔曼滤波&#xff08; E K F EKF EKF&#xff09;和粒子滤波&#xff08; P F PF PF&#xff09;在状态估计中的对比分析。 主要功能包括&#xff1a; 参数设置&#xff1a;初始…

Android Studio 开发快速获取开发版和发布版SHA1和MD5

本文讲解Android Studio 开发中如何快速获取开发版和发布版SHA1和MD5。 一、获取开发版: 点击Android Studio右上角Gradle按钮,打开Gradle视图 找到项目-Tasks-signingReport 双击即可AndroidStudio底部 Run面板获取开发版SHA1和MD5 二、获取发布版:

《深入解析 Java 中的 ThreadLocal》

ThreadLocal 1.概述 ThreadLocal被称为线程局部变量&#xff0c;用于在线程中保存数据。由于在ThreadLocal中保存的数据仅属于当前线程&#xff0c;所以该变量对其他线程而言是隔离的&#xff0c;也就是说该变量是当前线程独有的变量。 ThreadLocal用于在同一个线程间&#…

STM32CubeIDE | 使用HAL库的ADC读取内部传感器温度

1、cubemx配置 1.1、系统配置 1.2、GPIO配置 PB2设置为“GPIO_Output” user label设置为“LED” 1.3、串口配置 模式选择为“Asynchronous”&#xff0c;其他默认 1.4、时钟树配置 全部保持默认 2、ADC配置 通道选择“Temperature Sensor Channel”&#xff0c;其他默认 …

基于STM32的Zeta型数控电源设计

本设计基于STM32F103C6T6为主控芯片&#xff0c;基于Zeta型DC/DC电源的拓扑结构设计一种数控电源。系统包含单片机主控模块、Zeta型升降压模块、驱动模块、电流采样模块、电压采样模块、OLED显示模块、电源模块及按键模块。用电流采样模块采集电流&#xff0c;电压采样模块采集…

Skyvern:基于LLM和CV的开源RPA

Skyvern 使用 LLM 和计算机视觉来自动化基于浏览器的工作流程。它提供了一个简单的 API 端点&#xff0c;可以完全自动化大量网站上的手动工作流程&#xff0c;从而取代脆弱或不可靠的自动化解决方案。 传统的浏览器自动化方法需要为网站编写自定义脚本&#xff0c;通常依赖于…

基于小安派AiPi-Eyes-Rx的N合1触摸屏游戏

基于小安派AiPi-Eyes-Rx的N合1触摸屏游戏 目前存在的游戏&#xff1a; 植物大战僵尸&#xff1a;demos/pvz羊了个羊&#xff1a;demos/yang消消乐&#xff1a;demos/xiaoxiaole华容道&#xff1a;demos/huarongdao PVZ功能展示可见&#xff1a; 羊了个羊&#xff1a; 消消…