[推荐]大量 Blazor 学习资源(二)

继上一篇《[推荐]大量 Blazor 学习资源(一)》之后,社区反应不错,但因个人原因导致这篇文章姗姗来迟,不过最终还是来了!这篇文章主要收集一些常用组件、书籍和电子书。

资料来源:https://github.com/AdrienTorris/awesome-blazor/

并非完全翻译原文,会从所有资源里提取一些我认为好一点的资源,如有需要,从上面 Github 链接获取最新内容。

组件 / Components

  • (推荐)Ant Design Blazor - 一套企业级的UI组件基于Ant的设计和Blazor WebAssembly。(⭐1177)

https://github.com/ant-design-blazor/ant-design-blazor

Demo 演示

https://ant-design-blazor.github.io/

  • Bootstrap Blazor Component - Bootstrap 样式的 Blazor UI 组件库。(⭐575)

https://gitee.com/LongbowEnterprise/BootstrapBlazor

  • MatBlazor - Material Design 样式的 Blazor UI 组件库。(⭐1600)

  • Blazorise - Blazorise 基于 Blazor 和一些 CSS 框架(Bootstrap, Bulma, AntDesign 和 Material)的 Blazor UI 组件库。(⭐924)

https://github.com/stsrki/Blazorise

Blazorise 有两个原则:

  1. 保持简单

  2. 可扩展

Demo 演示:

  • Bootstrap Demo https://bootstrapdemo.blazorise.com/

  • Bulma Demo https://bulmademo.blazorise.com/

  • AntDesign Demo https://antdesigndemo.blazorise.com/

  • Material Demo https://materialdemo.blazorise.com/

  • eFrolic Demo https://efrolicdemo.blazorise.com/

  • BlazorStrap - Bootstrap 4 样式的 Blazor UI 组件库。(⭐521)

https://github.com/chanan/BlazorStrap

Demo 演示

https://blazorstrap.io/

  • Radzen.Blazor - 原生 UI 样式的 Blazor UI 组件库,Blazor. DataGrid, DataList, Tabs, Dialog 等等。(⭐362)

https://github.com/akorchev/blazor.radzen.com

Demo 演示

https://blazor.radzen.com/

  • Canvas - HTML5 Canvas API 的 Blazor 实现 (⭐215)

https://github.com/BlazorExtensions/Canvas

  • ChartJs.Blazor - Blazor 实现的 ChartJs (⭐231)

https://github.com/mariusmuntean/ChartJs.Blazor

Demo 演示

https://www.iheartblazor.com/welcome

  • DevExpress Blazor UI Components - DevExpress 的 Blazor UI 组件库 (⭐191)

https://github.com/DevExpress/RazorComponents

Demo 演示

https://demos.devexpress.com/blazor/

  • BlazorContextMenu - Material Design 样式的 Blazor ContextMenu 组件 (⭐181)

https://github.com/stavroskasidis/BlazorContextMenu

Demo 演示

https://blazor-context-menu-demo.azurewebsites.net/

  • Blazored.Modal - Blazor 模态框组件 (⭐181)

https://github.com/Blazored/Modal

  • Blazor.FlexGrid - Blazor GridView 组件 (⭐181)

https://github.com/Mewriick/Blazor.FlexGrid

  • Grid.Blazor - 适用于 ASP.NET MVC Blazor 的 CRUD 表格组件,支持筛选、排序、搜索、分页、嵌套表格和其他 (⭐177)

https://github.com/gustavnavar/Grid.Blazor

Demo 演示

https://gridblazor.azurewebsites.net/

  • BlazorMaterial - Material 风格的 Blazor UI 组件库 (⭐131)

https://github.com/BlazorExtensions/BlazorMaterial

  • BlazorWebFormsComponents - WebForms 可用的 Blazor UI 组件库 (⭐142)

https://github.com/FritzAndFriends/BlazorWebFormsComponents

语法类似这样的:

<asp:ButtonAccessKey="string"BackColor="color name|#dddddd"BorderColor="color name|#dddddd"BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"BorderWidth="size"CausesValidation="True|False"CommandArgument="string"CommandName="string"CssClass="string"Enabled="True|False"EnableTheming="True|False"EnableViewState="True|False"Font-Bold="True|False"Font-Italic="True|False"Font-Names="string"Font-Overline="True|False"Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large"Font-Strikeout="True|False"Font-Underline="True|False"ForeColor="color name|#dddddd"Height="size"ID="string"OnClick="Click event handler"OnClientClick="string"OnCommand="Command event handler"OnDataBinding="DataBinding event handler"OnDisposed="Disposed event handler"OnInit="Init event handler"OnLoad="Load event handler"OnPreRender="PreRender event handler"OnUnload="Unload event handler"PostBackUrl="uri"runat="server"SkinID="string"Style="string"TabIndex="integer"Text="string"ToolTip="string"UseSubmitBehavior="True|False"ValidationGroup="string"Visible="True|False"Width="size"
/>
  • bUnit - Blazor 组件测试 (⭐181)

https://github.com/egil/bunit

举例,想要测试 Counter 组件:

<h1>Counter</h1><p>Current count: @currentCount
</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {int currentCount = 0;void IncrementCount(){currentCount++;}
}

测试代码如下,使用 bUnit 和 xUnit:

[Fact]
public void CounterShouldIncrementWhenClicked()
{// Arrange: render the Counter.razor componentvar cut = RenderComponent<Counter>();// Act: find and click the <button> element to increment// the counter in the <p> elementcut.Find("button").Click();// Assert: first find the <p> element, then verify its contentcut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}
  • Blazored.Toast - Toast 提示组件,Blazor 应用和组件均可使用 (⭐147)

https://github.com/Blazored/Toast

  • BlazorInputFile - Blazor 文件上传组件 (⭐140)

https://github.com/SteveSandersonMS/BlazorInputFile

  • Syncfusion Blazor UI Components - Syncfusion UI 组件库 (⭐105)

https://github.com/syncfusion/ej2-aspnet-core-blazor-samples

Demo 演示

https://blazor.syncfusion.com/

  • Blazored.Typeahead - 自动完成提示的文本框,支持本地和远程数据,client-side 和 server-side 都支持 (⭐120)

https://github.com/Blazored/Typeahead

  • Sotsera.Blazor.Toaster  - Toast 提示框组件 (⭐90)

https://github.com/sotsera/sotsera.blazor.toaster

Demo 演示

https://blazor-toaster.sotsera.com/

  • Blazored.Menu - 菜单组件 (⭐67)

https://github.com/Blazored/Menu

  • Blazor-DragDrop - 拖放组件 (⭐79)

https://github.com/Postlagerkarte/blazor-dragdrop

Demo 演示

https://blazordragdrop.azurewebsites.net/

  • BlazorTable - 带有排序、分页、筛选的表格组件 (⭐84)

https://github.com/IvanJosipovic/BlazorTable

Demo 演示

https://blazortable.netlify.app/

  • Blazor-Charts - SVG 表格组件 (⭐45)

https://github.com/Misfits-Rebels-Outcasts/Blazor-Charts

Demo 演示

https://www.webassemblyman.com/blazor/blazorcharts.html

  • NodaTimePicker - 时间选择器组件 (⭐39)

https://github.com/nheath99/NodaTimePicker

Demo 演示

https://nodatimepicker.z13.web.core.windows.net/

  • BlazorDateRangePicker - 范围日期选择组件 (⭐41)

https://github.com/jdtcn/BlazorDateRangePicker

Demo 演示

https://blazordaterangepicker.azurewebsites.net/

  • BlazorGoogleMaps - 谷歌地图组件 (⭐43)

https://github.com/rungwiroon/BlazorGoogleMaps

  • Blazor.SignaturePad - 签名面板(画图) (⭐22)

https://github.com/Mobsites/Blazor.SignaturePad

Demo 演示

https://signaturepad.mobsites.com/

  • BlazorQuery - Blazor 版 jQuery  (⭐40)

https://github.com/kevinjpetersen/BlazorQuery

用 jQuery 的方式操作 DOM,ajax 请求等等。该项目还在紧急开发中

示例代码:

@page "/"
@inject BlazorQueryDOM DOM<h1>Hello, DOM!</h1>
<h1>Hello, Blazor!</h1>@code {protected override async Task OnAfterRenderAsync(){await DOM.Select("h1").CSS("background-color", "red");}
}
@page "/"
@inject BlazorQueryDOM DOM<h1>Hello, DOM!</h1>
<h1>Hello, Blazor!</h1>@code {protected override async Task OnAfterRenderAsync(){await DOM.Select("h1").Text("Now this text is changed");}
}
  • Blazor-Dom-Confetti - 扔五彩纸屑 (⭐40)

https://github.com/ctrl-alt-d/blazor-dom-confetti

  • Telerik UI for Blazor - Telerik UI 组件库 (收费)

https://www.telerik.com/blazor-ui

  • TwitterShareButton - Twitter 分享按钮 (⭐2)

https://github.com/jsakamoto/Toolbelt.Blazor.TwitterShareButton

  • Blazor.LoadingIndicator - 加载指示器 (⭐44)

https://github.com/h3x4d3c1m4l/BlazorProgressIndicator

  • BlazorMonaco - 微软 Monaco Editor (VSCode 核心)组件 (⭐10)

https://github.com/serdarciplak/BlazorMonaco

Demo 演示

https://serdarciplak.github.io/BlazorMonaco/

书籍 / Books

  • Blazor Revealed (Blazor 揭秘)

Blazor Revealed, Building Web Applications in .NET(Published February, 2019).

国外:https://www.apress.com/gp/book/9781484243428    京东:https://item.jd.com/41737176374.html      当当:http://search.dangdang.com/?key=Blazor%20Revealed&act=input

电子书:

PDF:http://file.allitebooks.com/20190205/Blazor%20Revealed.pdf     ePub:http://file.allitebooks.com/20190205/Blazor%20Revealed.epub

  • Blazor Quick Start Guide: Build web applications using Blazor, EF Core, and SQL Server (Blazor 快速入门指南:使用Blazor、EF Core和SQL Server构建web应用程序)

亚马逊:https://www.amazon.in/gp/product/178934414X/ref=awesome_blazor    京东:https://item.jd.com/41499035732.html

电子书:

https://e.jd.com/30506217.html

电子书 / E-Books

  • Blazor Succinctly - 免费的从0开始学习 Blazor 框架的电子书。

https://www.syncfusion.com/ebooks/blazor-succinctly

  • Blazor, A Beginners Guide - Blazor 初学者指南。

https://www.telerik.com/campaigns/blazor/wp-beginners-guide-ebook

  • Blazor for ASP.NET Web Forms developers

一本来自微软的免费电子书。

https://dotnet.microsoft.com/learn/aspnet/architecture#blazor-for-web-forms-devs-ebook-swim

  • Using CSLA 5: Blazor and WebAssembly

本书介绍了新的Blazor UI框架,包括如何创建服务器端和客户端WebAssembly项目,如何实现身份验证和授权,以及如何使用数据绑定。然后介绍CSLA.NET如何支持Blazor,包括浏览完整的示例应用程序。

https://store.lhotka.net/using-csla-5-blazor-and-webassembly

  • An Introduction to Building Applications with Blazor

如何开始使用这个令人兴奋的易于使用的 Microsoft C# 框架创建应用程序

https://www.amazon.com/Introduction-Building-Applications-Blazor-applications-ebook/dp/B07WPQTT6H

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

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

相关文章

Sql Server之旅——第八站 看公司这些DBA们设计的这些复合索引

这一篇再说下索引的最后一个主题&#xff0c;索引覆盖&#xff0c;当然学习比较好的捷径是看看那些大师们设计的索引&#xff0c;看从中能提取些什么营养的东西&#xff0c;下面我们看看数据库中一个核心的Orders表。一&#xff1a;查看表的架构1. 先查看这个表的大概架构信息-…

C++ setprecision()用法

io 流控制头文件, 主要是一些操纵用法如setw(int n),setprecision(int n) #include < iomanip > setw(n)用法&#xff1a; 通俗地讲就是预设宽度 #include<iostream> #include <iomanip> using namespace std;int main() {cout << setw(5) <<…

备战ccpc分站赛:秦皇岛和威海站(数论模块和dp模块)

挑战程序设计竞赛&#xff08;第2版&#xff09;练习题 tips&#xff1a;难度&#xff08;个人主观判断&#xff09;&#xff1a; 简单* 简单但卡思维 ** 中 *** 中稍加思考 **** 难 ***** 1 . 记录结果再利用的“动态规划” &#xff08;1&#xff09;基础的动态规划算法&am…

15分钟从零开始搭建支持10w+用户的生产环境(四)

上一篇文章&#xff0c;介绍了这个架构中&#xff0c;WebServer的选择&#xff0c;以及整个架构中扩展时的思路。原文地址&#xff1a;15分钟从零开始搭建支持10w用户的生产环境(三)五、架构实践前边用了三篇文章&#xff0c;详细介绍了这个架构的各个部分的选择以及安装。这篇…

[Java基础]体验Stream流

代码如下: package StreamTest;import java.lang.reflect.Array; import java.util.ArrayList;public class StreamDemo {public static void main(String[] args){ArrayList<String> list new ArrayList<String>();list.add("Tom");list.add("ja…

Cow Bowling POJ - 3176(基础的动态规划算法)

题意&#xff1a; 杨辉三角&#xff0c;让从顶部开始走到底部&#xff0c;所经过的每一层的点数相加&#xff0c;使得实现最高和。 题目&#xff1a; The cows don’t use actual bowling balls when they go bowling. They each take a number (in the range 0…99), thoug…

[Java基础]Stream流的常见生成方式

1.Collection体系的集合可以使用默认方法stream()生成流 default Stream< E > stream() 代码如下: package StreamTest;import java.util.ArrayList; import java.util.HashSet; import java.util.List; import java.util.Set; import java.util.stream.Stream;public …

Sumsets POJ - 2229(计数dp)

题意&#xff1a; 给一个数&#xff0c;是集合的总数和&#xff0c;集合元素只能为2的次幂数&#xff0c;问这样的集合有多少&#xff1f; 题目&#xff1a; Farmer John commanded his cows to search for different sets of numbers that sum to a given number. The cows…

15分钟从零开始搭建支持10w+用户的生产环境(二)

上一篇文章&#xff0c;把这个架构的起因&#xff0c;和操作系统的选择进行了详细说明。原文地址&#xff1a;15分钟从零开始搭建支持10w用户的生产环境(一)二、数据库的选择对于一个10W用户的系统&#xff0c;数据库选择很重要。一般来说&#xff0c;这个用户量&#xff0c;根…

[Java基础]Stream流的常见中间操作方法

代码如下: package StreamTest;import java.util.ArrayList;public class StreamDemo02 {public static void main(String[] args){ArrayList<String> list new ArrayList<String>();list.add("Tom");list.add("Bom");list.add("jack&q…

云原生初探

文章目录什么是云原生&#xff1f;第二讲 容器的基本概念什么是容器&#xff1f;容器运行时的生命周期容器项目的架构容器和VM的差异第三讲 Kubernetes核心概念什么是KubernetesKubernetes架构Kubernetes核心概念和API第四讲 理解Pod和容器设计模式为什么Pod必须是原子调度单位…

15分钟从零开始搭建支持10w+用户的生产环境(三)

上一篇文章介绍了这个架构中&#xff0c;选择MongoDB做为数据库的原因&#xff0c;及相关的安装操作。原文地址&#xff1a;15分钟从零开始搭建支持10w用户的生产环境(二)三、WebServer在SOA和gRPC大行其道的今天&#xff0c;WebServer在系统中属于重中之重&#xff0c;是一个系…

[Java基础]Stream流终结操作之forEachcount

代码如下: package StreamTest;import java.util.ArrayList;public class StreamDemo06 {public static void main(String[] args) {ArrayList<String> list new ArrayList<String>();list.add("Jack");list.add("Tom");list.add("张敏…

实现.Net程序中OpenTracing采样和上报配置的自动更新

前言OpenTracing是一个链路跟踪的开放协议&#xff0c;已经有开源的.net实现&#xff1a;opentracing-csharp&#xff0c;同时支持.net framework和.net core&#xff0c;Github地址&#xff1a;https://github.com/opentracing/opentracing-csharp。这个库支持多种链路跟踪模式…

[Java基础]Stream流综合练习

代码如下: package StreamDemoFinal;public class Actor {private String name;public Actor(String name) {this.name name;}public String getName() {return name;}public void setName(String name) {this.name name;} }package StreamDemoFinal;import java.util.Array…

基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射

上一篇文章集成了定时任务处理框架Hangfire&#xff0c;完成了一个简单的定时任务处理解决方案。本篇紧接着来玩一下AutoMapper&#xff0c;AutoMapper可以很方便的搞定我们对象到对象之间的映射关系处理&#xff0c;同时abp也帮我们是现实了IObjectMapper接口&#xff0c;先根…

磁盘文件系统、挂载

参考&#xff1a;https://zhuanlan.zhihu.com/p/106459445 https://blog.csdn.net/qq_39521554/article/details/79501714 文件系统 持久化的数据是存储在外部磁盘上的&#xff0c;如果没有文件系统&#xff0c;访问这些数据需要直接读写磁盘的sector&#xff0c;而文件系统存…

[Java基础]Stream流的收集操作

代码如下: package CollectPack;import java.util.*; import java.util.stream.Collectors; import java.util.stream.Stream;public class CollectDemo {public static void main(String[] args){List<String> list new ArrayList<String>();list.add("林青…

15分钟从零开始搭建支持10w+用户的生产环境(一)

前言这是一个基于中小型企业或团队的架构设计。不考虑大厂。有充分的理由相信&#xff0c;大厂有绝对的实力来搭建一个相当复杂的环境。中小型企业或团队是个什么样子&#xff1f;开发团队人员配置不全&#xff0c;部分人员身兼开发过程上下游的数个职责&#xff1b;没有专职的…

高性能IO——Reactor模式

高性能IO——Reactor模式 参考&#xff1a;https://cloud.tencent.com/developer/article/1513447 目前的IO线程处理模型一般可以分为以下三类&#xff1a; 单线程阻塞I/O服务模型&#xff1b; while(true) {socket accept();handle(socket) }多线程阻塞I/O服务模型&#xf…