MASA.Blazor 是一套基于Material设计规范和BlazorComponent的交互能力提供标准的基础组件库。
MASA.Blazor 提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件。从更多实际场景出发，满足更多用户和场景的需求，最大的减少开发者的时间成本。缩短开发周期提高开发效率。并提供一套Web解决方案示例 - MASA Blazor Pro 有多种常见场景和预设布局等精彩内容。
特性
- 丰富组件：包含Vuetify 1:1还原的基础组件，以及很多实用的预置组件和.Net深度集成功能，包括Url、面包屑、导航三联动，高级搜索，i18n等
- UI设计语言：设计风格现代，UI 多端体验设计优秀
- 专业示例：MASA Blazor Pro 提供多种常见场景的预设布局
- 简易上手：丰富详细的上手文档，免费的视频教程（制作中）
- 社区活跃鼓励：用户参与实时互动，做出贡献加入我们，构建最开放的开源社区
- 长期支持：全职团队维护，长期提供支持，并提供企业级支持
- 知名企业选择：该技术框架被多家知名企业选择使用，未来MASA Stack产品线也将一直使用，持续增加新功能
统计
快速使用
开发环境搭建
CLI
Install Template
dotnet new --install Masa.Template
Create Project
dotnet new masabp -o Masa.Test
- Blazor WebAssembly
dotnet new masabp --mode Wasm -o Masa.TestWasm
- Blazor RCL
dotnet new masabp --mode ServerAndWasm -o Masa.TestRcl
Go to the Server project directory
cd Masa.Test\Masa.Test.Server
Run
dotnet run
现有项目
- 安装Nuget包
dotnet add package Masa.Blazor
- 将 Masa.Blazor 的相关服务添加到
Startup.ConfigureServices:
services.AddMasaBlazor();
- 在
wwwroot/index.html(WebAssembly) 或Pages/_Host.cshtml(Server) 中引入样式、字体、脚本:
<html lang="en"> <head> <!--Style--> <link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet"> <link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet"> <!--Font--> <link href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> </head> <body> <!--Script (try to put it at the end of the body)--> <script src="_content/BlazorComponent/js/blazor-component.js"></script> </body> </html>
- 在
_Imports.razor文件中加入命名空间:
@using Masa.Blazor @using BlazorComponent
- 修改
Shared/MainLayout.razor文件，让MApp成为根元素：
<MApp> //其它布局内容 </MApp>
本地开发
开发环境搭建
克隆代码
git clone git@github.com:BlazorComponent/Masa.Blazor.git cd Masa.Blazor/src git clone git@github.com:BlazorComponent/BlazorComponent.git
运行文档站点
cd Doc/Masa.Blazor.Doc.Server dotnet run
访问
推荐使用 chrome 或 edge 访问 http://localhost:5000/
评论