Skip to content

Latest commit

 

History

History
271 lines (163 loc) · 10.7 KB

README.zh-CN.md

File metadata and controls

271 lines (163 loc) · 10.7 KB
Raw



MASA Blazor Logo

MASA Blazor

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

MASA.Blazor .NET Nuget Nuget

English | 简体中文

MASA Blazor是什么？

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

为什么选择MASA Blazor？

MASA Blazor 基于Material设计规范，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能。MASA Blazor 是由一支专业的全职技术团队进行定期维护升级，高效的响应速度，多元化的解决方案，长期提供支持，并提供企业级支持。目前已在几家知名企业使用，后续MASA Stack产品系列也将持续使用，除了可以保证项目质量，还可以持续的增加新的组件和功能。MASA Stack除了为开发者提供众多中台类开源项目，其最基础的组成部分之一MASA Blazor也希望可以打造成最实用的组件库。

特性

  • 丰富组件：包含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

masabp

现有项目

  • 安装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")/[email protected]/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 [email protected]:BlazorComponent/Masa.Blazor.git
cd Masa.Blazor/src
git clone [email protected]:BlazorComponent/BlazorComponent.git

运行文档站点

cd Doc/Masa.Blazor.Doc.Server
dotnet run

访问

推荐使用 chrome 或 edge 访问 http://localhost:5000/

相关资源

相关项目

浏览器支持

chromefirefoxedgeieSafarioper

移动设备

iosAndriod

Chrome Firefox Safari Microsoft Edge
iOS Supported Supported Supported Supported
Android Supported Supported N/A Supported

桌面设备

macOSlinuxwindows

Chrome Firefox Safari Opera Microsoft Edge Internet Explorer
Mac Supported Supported Supported Supported N/A N/A
Linux Supported Supported N/A N/A N/A N/A
Windows Supported Supported Not supported Supported Supported Supported, IE11+

由于 WebAssembly 的限制，Blazor WebAssembly 不支持 IE 浏览器，但 Blazor Server 支持 IE 11†。 详见官网说明。

如何贡献

  1. Fork & Clone
  2. Create Feature_xxx branch
  3. Commit with commit message, like feat:add MButton
  4. Create Pull Request

如果你希望参与贡献，欢迎 Pull Request，或给我们 报告 Bug 。

贡献者

感谢所有为本项目做出过贡献的朋友。

交流

QQ群 微信公众号 微信客服
masa.blazor-qq masa.blazor-weixin masa.blazor-weixin

开发团队

数闪技术团队，是一支高效，稳定，创新的团队。团队秉承着丰富Blazor生态的初心，去不断努力，为开发人员带来更好的体验是数闪技术团队的追求。感谢各位的支持和使用。

行为准则

本项目采用了《贡献者公约》所定义的行为准则，以明确我们社区的预期行为。更多信息请见 MASA Stack Community Code of Conduct.

许可声明

Masa.Blazor

Copyright (c) 2021-present Masa.Blazor