MASA.Blazor企业级 UI 组件库

联合创作 · 2023-09-28 01:03

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/

本地开发

开发环境搭建

克隆代码

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/

浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报