[推荐]大量 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 有两个原则:
保持简单
可扩展
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
[推荐]大量 Blazor 学习资源(二)相关推荐
- [推荐]大量 Blazor 学习资源(三)
大量 Blazor 学习资源系列文章: [推荐]大量 Blazor 学习资源(一) [推荐]大量 Blazor 学习资源(二) 这次主要内容有 Blazor 相关视频,因为本身视频是英文的,所以就保持 ...
- [推荐]大量 Blazor 学习资源(一)
预警前言 / Introduction Blazor 是什么? Blazor 允许您使用 C# 而不是 JavaScript 构建交互式 Web UI. Blazor 应用由使用 C#.HTML 和 ...
- 推荐好的学习资源网站
今天做python练习题目时,遇到一些暂时没有思路的小题就在网上百度,无意中发现了一个很好的学习网站,内容全面丰富,几乎涵盖了IT各种编程语言教程.其网址链接是 菜鸟教程 包含了前端页面.服务端.数据 ...
- 深度学习之30分钟快速入门PyTorch(附学习资源推荐)
目录 1.Pytorch简介 1.0 如何使用本教程 1.1 PyTorch由来 1.2 Torch简介 1.3 重新认识PyTorch 1.4 PyTorch和Tensorflow的对比 1.5 总 ...
- Android 学习资源收集
在开始讲述之前,你应该先看一下世界各地的开发人员是如何推荐的,他们自己学习Android时又是用的什么资源.这里我们将Quora和Reddit上针对Android应用开发学习所推荐的优秀资源做了快速总 ...
- python入门视频教程推荐-python入门学习哪个书比较好(python视频教程知乎)
自学python的学习路线是什么?推荐一些python学习资源 第一段 初级,掌握Python的语法和常用库的使用 这里首先推雪锋在网上的书籍,这是Python2.7的,这本书适合于重头开始一直读完, ...
- Android国外学习资源汇总
想学习Android开发,现在就是最佳时机:继Google I/O 2014与2015年度开发者大会之后,Android系统的设计与开发日臻完善.无论是只将编程当兴趣的业余爱好者,还是正想方设法建立应 ...
- 学python有哪些书推荐-有什么Python学习的书籍和学习资源推荐?
看到这个题目已经有一段时间,今天晚上和两位同事吃饭时我问起这个问题,"你们学习Python过程中看过什么不错的书籍?"两位同事的回答都是"没看书,就是在网上找了一些教程简 ...
- python教程书籍-有什么Python学习的书籍和学习资源推荐?
看到这个题目已经有一段时间,今天晚上和两位同事吃饭时我问起这个问题,"你们学习Python过程中看过什么不错的书籍?"两位同事的回答都是"没看书,就是在网上找了一些教程简 ...
最新文章
- iOS自定义简易刷新视图(仿MJRefresh)
- Nginx简介及使用Nginx实现负载均衡的原理【通俗易懂,言简意赅】
- python爬虫表格中清除空格_爬虫清洗:python strip()函数 去空格\n\r\t函数的用法
- 怎么会执行sql 懒加载 没用_太神奇的 SQL 查询经历,group by 慢查询优化!
- 【BZOJ1030】【Tyvj1806】文本生成器,AC自动机+DP
- iOS 的内存管理和虚拟内存机制具体是怎么运作的?
- ACM弱校ACMer A HDU1045Fire Net有感
- 在线php网站扫描,php实现在线端口扫描实例代码_PHP教程
- Intellij IDEA创建包(package)问题解决方案
- 原生Android用不了電信4g,给初中生准备的手机,在深圳地区用中国电信4G体验多亲Qin2 AI助手,开箱和使用体验...
- 公司注册地址要注意,小心被拉“黑”,征信受影响
- 计算机的隐藏功能应用,电脑也有隐藏功能, 你知道吗?
- 三维建模初学者学习方法及资料
- 算笔账:养老保险应该少交还是多交
- Sublime修改成为Python编辑器,设置系统环境变量
- 安卓手机怎么连苹果电脑?
- 简单好用的录音软件?
- UG\NX二次开发 判断面的凹凸、圆柱还是孔、外R角还是内R角。三种方案
- Qt下libusb-win32的使用(转)
- weboffice批注 java_Java开发调用PageOffice提供的Word手写批注接口
热门文章
- 初识Spark2.0之Spark SQL
- 6 四大组件之Service
- poj 1860 Currency Exchange (最短路bellman_ford思想找正权环 最长路)
- IE9浏览Flash页面时显示错位并不停地闪烁
- 在Ubuntu服务器上打开第二个控制台会话
- 用SmarterFox替换Internet Explorer的“加速器”
- 目标跟踪 facebook_如何关闭Facebook Messenger的位置跟踪(如果已启用)
- angular ng-zorro 用组件自身方的法来重置表单校验
- 排序算法之快速排序详解
- LeetCode 366. Find Leaves of Binary Tree