MudBlazor

C#源码 2025-08-16

MudBlazor /raw/dev/content/ MudBlazor -github-nobg-dark.png“>”> MudBlazor /raw/dev/content/ MudBlazor -github -nobg.png“>”>

料理的材料设计组件

MudBlazor是雄心勃勃的材料设计组件库。加速您的Web应用程序开发并构建直观的用户界面,利用C#的全部功能适应和扩展此开源框架。

文档⚡互动游乐场

?为什么选择MudBlazor ?

?美丽的材料设计组件。
用最小的JavaScript完全编写C#。
丰富的文档,有广泛的例子。
?没有第三方依赖性以最大程度的灵活性。
✅稳定性的广泛测试覆盖范围。

repo统计

入门

我们在模板存储库中有现成的模板,或遵循以下快速安装指南:

安装

安装程序包:

dotnet add package MudBlazor

添加到_Imports.razor

 @ using MudBlazor

添加到MainLayout.razorApp.razor

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

添加到您的html headindex.html / _Layout.cshtml / _Host.cshtml / App.razor ):razor):

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

body末端添加到默认的大风脚本:

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

添加到Program.cs的相关部分:

 using MudBlazor . Services ; 
 builder . Services . AddMudServices ( ) ;

示例用法

MudBlazor is @Text </MudText> <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ButtonOnClick"> @ButtonText </MudButton> @code { string Text { get; set; } = "????"; string ButtonText { get; set; } = "Click Me"; int ClickCount { get; set; } void ButtonOnClick() { ClickCount += 1; Text = $"Awesome x {ClickCount}"; ButtonText = "Click Me Again"; } }">
< MudText Typo = " Typo.h6 " >
    MudBlazor is @Text
</ MudText >

< MudButton Variant = " Variant.Filled " 
           Color = " Color.Primary " 
           OnClick = " ButtonOnClick " >
    @ButtonText
</ MudButton >

@code {
    string Text { get ; set ; } = " ???? " ;
    string ButtonText { get ; set ; } = " Click Me " ;
    int ClickCount { get ; set ; }

    void ButtonOnClick ()
    {
        ClickCount += 1 ;
        Text = $" Awesome x { ClickCount } " ;
        ButtonText = " Click Me Again " ;
    }
}

有关更多详细信息,请参阅我们网站上的完整安装指南。

?贡献

社区的贡献使MudBlazor成功。

如果您对C#,Glazor,JavaScript或CSS感到满意,我们会喜欢您的帮助!
无论是修复错误,添加功能还是改进文档,每个贡献都很重要。

我们旨在迅速审查和合并非破坏拉动请求。
对于更大的功能或更改,请随时与我们聊天,以在潜水之前获得反馈。

查看我们的贡献指南,以开始并进一步了解该项目的运作方式。
✅如果PR修复了您报告的内容,请在本地测试预览版本,以确保您的应用按预期工作。

版本支持

MudBlazor 。网 支持
5.xx .NET 5 结束(2022年1月)
6.xx .NET 6,.NET 7,.NET 8 结束(2025年1月)
7.xx .NET 7,.NET 8 有限的支持
8.xx .NET 8,.NET 9 ✔️全力支持

提示

升级?检查我们的迁移指南以寻求破坏变化的帮助。

警告

  1. 不支持静态渲染 - 了解更多。
  2. 可能不支持较旧的浏览器。使用现代的,最新的浏览器 - 大店支持的平台。
下载源码

通过命令行克隆项目:

git clone https://github.com/MudBlazor/MudBlazor.git