Blazor的Material Design组件

MudBlazor是一个雄心勃勃的Blazor Material Design组件框架，强调易用性和清晰的结构。它非常适合那些想要快速构建Web应用程序而无需纠结于CSS和JavaScript的.NET开发人员。MudBlazor完全使用C#编写，使您能够轻松适应、修复或扩展框架。文档中有大量示例，使理解和学习MudBlazor变得非常容易。

文档和演示

为什么MudBlazor如此成功？

基于Material Design的清晰美观的图形设计。
结构清晰易懂。
优秀的文档，包含许多示例和源代码片段。
所有组件均完全用C#编写，不允许使用JavaScript（除非绝对必要）。
用户无需CSS即可创建漂亮的应用程序（但他们当然也可以使用CSS）。
不依赖其他组件库，对组件和功能有100%的控制权。
稳定性！我们致力于完整的测试覆盖。
频繁发布，使开发人员能够及时获得他们的PR和修复。

先决条件

MudBlazor	.NET	支持
1.x.x - 2.0.x	.NET 3.1	2021年3月结束
5.x.x	.NET 5	2022年1月结束
6.x.x	.NET 6, .NET 7, .NET 8	:heavy_check_mark:
7.x.x	.NET 7, .NET 8	:heavy_check_mark:

:information_source: 目前仅支持交互式渲染模式 - 了解更多。

:warning: Blazor仅支持当前浏览器版本。为确保使用MudBlazor时获得无缝体验，请使用最新的Web浏览器。如果浏览器版本不再由其发布者维护，我们无法保证与MudBlazor的兼容性。

统计

Alt

贡献

👋 感谢您想要贡献！社区的贡献使MudBlazor变得成功。

如果您熟悉C#、Blazor、JavaScript或CSS等技术，并希望回馈社区，请考虑提交Pull Request！我们会尝试合并所有非破坏性的错误修复，并会考虑新功能对社区的价值。请注意，我们不能保证您的PR一定会被合并，所以如果您想在投入工作之前确定，可以先联系团队。

查看贡献指南以了解我们的目标并了解更多关于项目内部的信息。

入门

完整的安装说明可以在我们的网站上找到。或者使用MudBlazor.Templates仓库中的模板之一。

快速安装指南

安装包

dotnet add package MudBlazor

在_Imports.razor中添加以下内容

@using MudBlazor

在MainLayout.razor或App.razor中添加以下内容

<MudThemeProvider/>
<MudPopoverProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

在index.html（客户端）或_Host.cshtml（服务器端）的head中添加以下内容

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

在index.html或_Host.cshtml的body中添加以下内容

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

在Program.cs的相关部分添加以下内容

using MudBlazor.Services;

builder.Services.AddMudServices();

使用

<MudText Typo="Typo.h6">MudBlazor是 @Text</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ButtonOnClick">@ButtonText</MudButton>

@code {
  public string Text { get; set; } = "????";
  public string ButtonText { get; set; } = "点击我";
  public int ButtonClicked { get; set; }

  void ButtonOnClick()
  {
      ButtonClicked += 1;
      Text = $"太棒了 x {ButtonClicked}";
      ButtonText = "再次点击我";
  }
}