3

企业级 UI 组件库 MASA.Blazor

 2 years ago
source link: https://www.oschina.net/p/masa-blazor
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

MASA.Blazor首页、文档和下载 - 企业级 UI 组件库 - OSCHINA - 中文开源技术交流社区

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

开发环境搭建

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/


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK