MASA.Blazor 是一套基于Material设计规范和BlazorComponent的交互能力提供标准的基础组件库。

MASA.Blazor 提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件。从更多实际场景出发，满足更多用户和场景的需求，最大的减少开发者的时间成本。缩短开发周期提高开发效率。并提供一套Web解决方案示例 - MASA Blazor Pro 有多种常见场景和预设布局等精彩内容。

特性

丰富组件：包含Vuetify 1:1还原的基础组件，以及很多实用的预置组件和.Net深度集成功能，包括Url、面包屑、导航三联动，高级搜索，i18n等
UI设计语言：设计风格现代，UI 多端体验设计优秀
专业示例：MASA Blazor Pro 提供多种常见场景的预设布局
简易上手：丰富详细的上手文档，免费的视频教程（制作中）
社区活跃鼓励：用户参与实时互动，做出贡献加入我们，构建最开放的开源社区
长期支持：全职团队维护，长期提供支持，并提供企业级支持
知名企业选择：该技术框架被多家知名企业选择使用，未来MASA Stack产品线也将一直使用，持续增加新功能

统计

Alt

快速使用

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>

更多详情：https://blazor.masastack.com/

本地开发

开发环境搭建

安装 .NET SDK 6.0
安装 Visual Studio Code or Visual Studio 2022

克隆代码

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/

MASA.Blazor企业级 UI 组件库

特性

统计

快速使用

开发环境搭建

CLI

现有项目

本地开发

开发环境搭建

克隆代码

运行文档站点

访问