本期推荐的是一个基于Material设计规范和BlazorComponent的交互能力提供标准的基础组件库——MASA Blazor。
MASA Blazor是基于Material设计规范和BlazorComponent的交互能力提供标准的基础组件库。提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件。从更多实际场景出发，满足更多用户和场景的需求，最大的减少开发者的时间成本。
功能特性
- 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI
- 共享使用 .NET 编写的服务器端和客户端应用逻辑
- 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器
- 与新式托管平台（如 Docker）集成
- 使用 C# 代替 JavaScript 来编写代码
- 利用现有的 .NET 库生态系统
- 在服务器和客户端之间共享应用逻辑
- 受益于 .NET 的性能、可靠性和安全性
- 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作
- 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成
快速使用
依赖环境
- 安装.NET SDK 6.0
- 安装Visual Studio Code或Visual Studio 2022
开发环境搭建
安装：
dotnet new --install Masa.Template创建项目：
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运行：
cd Masa.Test\Masa.Test.Serverdotnet 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>浏览器支持
|
浏览器名称 |
支持状态 |
|
Chromium (Chrome, Edge Insider) |
支持 |
|
Edge |
支持 |
|
Firefox |
支持 |
|
Safari 10+ |
支持 |
|
IE11/Safari 9 |
支持(polyfill) |
|
IE9 / IE10 |
不支持 |
组件示例
Alert 提示框
@using AlertTypes = BlazorComponent.AlertTypes
<div>
<MAlert Dense
Type="AlertTypes.Info">
I'm a dense alert with a <strong>type</strong> of info
</MAlert>
<MAlert Dense
Text
Type="AlertTypes.Success">
I'm a dense alert with the <strong>text</strong> prop and a <strong>type</strong> of success
</MAlert>
<MAlert Dense
Border="Borders.Left"
Type="AlertTypes.Warning">
I'm a dense alert with the <strong>border</strong> prop and a <strong>type</strong> of warning
</MAlert>
<MAlert Dense
Outlined
Type="AlertTypes.Error">
I'm a dense alert with the <strong>outlined</strong> prop and a <strong>type</strong> of error
</MAlert>
</div>Avatar 头像
<div class="text-center" style="width:100%">
<MAvatar Color="primary" Size="56">
<span class="white--text">VJ</span>
</MAvatar>
</div>Button 按钮
<div class="text-center">
<MButton class="mx-2"
Fab
Small
Dark
Color="primary">
<MIcon>
mdi-minus
</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Small
Dark
Color="pink">
<MIcon>mdi-heart</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Color="indigo">
<MIcon>mdi-plus</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Color="teal">
<MIcon>mdi-format-list-bulleted-square</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Large
Color="cyan">
<MIcon>mdi-pencil</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Large
Color="purple">
<MIcon>
mdi-android
</MIcon>
</MButton>
</div>Dialog 对话框
<MRow Justify="JustifyTypes.SpaceAround">
<MCol Cols="@("auto")">
<MDialog @bind-Value="dialog"
Transition="dialog-bottom-transition"
MaxWidth="600">
<ActivatorContent>
<MButton Color="primary"
@attributes="@context.Attrs">
From the bottom
</MButton>
</ActivatorContent>
<ChildContent>
<MCard>
<MToolbar Color="primary"
Dark>
Opening from the bottom
</MToolbar>
<MCardText>
<div class="text-h2 pa-12">Hello world!</div>
</MCardText>
<MCardActions Class="justify-end">
<MButton Text
OnClick="() => dialog = false">
Close
</MButton>
</MCardActions>
</MCard>
</ChildContent>
</MDialog>
</MCol>
</MRow>Tab 选项卡
<MCard>
<MTabs BackgroundColor="deep-purple accent-4" CenterActive Dark>
<MTab>One</MTab>
<MTab>Two</MTab>
<MTab>Three</MTab>
<MTab>Four</MTab>
<MTab>Five</MTab>
<MTab>Six</MTab>
<MTab>Seven</MTab>
<MTab>Eight</MTab>
<MTab>Nine</MTab>
<MTab>Ten</MTab>
<MTab>Eleven</MTab>
<MTab>Twelve</MTab>
<MTab>Thirteen</MTab>
<MTab>Fourteen</MTab>
<MTab>Fifteen</MTab>
<MTab>Sixteen</MTab>
<MTab>Seventeen</MTab>
<MTab>Eighteen</MTab>
<MTab>Nineteen</MTab>
<MTab>Twenty</MTab>
</MTabs>
</MCard>更多组件示例参考：
https://blazor-wasm.masastack.com/components/alerts
—END—
开源协议：MIT
