[推薦]大量 Blazor 學習資源（二）
阿新 • • 發佈：2020-05-28
繼上一篇《[[推薦]大量 Blazor 學習資源（一）](https://mp.weixin.qq.com/s/9cnBKj_y2IDNeZtJctdmAA)》之後，社群反應不錯，但因個人原因導致這篇文章姍姍來遲，不過最終還是來了！這篇文章主要收集一些常用元件、書籍和電子書。
> 資料來源：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
語法類似這樣的：
```
```
* bUnit - Blazor 元件測試 (⭐181)
> https://github.com/egil/bunit
舉例，想要測試 Counter 元件：
```
();
// Act: find and click the
Counter
Current count: @currentCount
@code { int currentCount = 0; void IncrementCount() { currentCount++; } } ``` 測試程式碼如下，使用 bUnit 和 xUnit： ``` [Fact] public void CounterShouldIncrementWhenClicked() { // Arrange: render the Counter.razor component var cut = RenderComponent