MudBlazor下载 - MudBlazor源代码下载

MudBlazor

其他源码

v7.15.0

下载

料理的材料设计组件

Mudblazor是雄心勃勃的材料设计组件框架，用于易于使用和清晰的结构。它非常适合想要快速构建Web应用程序而不必与CSS和JavaScript斗争的.NET开发人员。完全写在C＃上的Mudblazor，使您能够适应，修复或扩展框架。文档中有很多示例，这使得理解和学习泥粉非常容易。

文档和演示

mudblazor.com
try.mudblazor.com

为什么Mudblazor如此成功？

基于材料设计的清洁和美学图形设计。
清晰易理解的结构。
许多示例和源代码片段的良好文档。
所有组件完全写在C＃中，不允许JavaScript（除非绝对必要）。
用户可以在不需要CSS的情况下制作精美的应用程序（但当然也可以使用CSS）。
对其他组件库没有依赖性，100％控制组件和功能。
稳定！我们努力进行完整的测试覆盖范围。
发行通常可以使开发人员及时获取PR和修复。

先决条件

泥法	。网	支持
1.xx -2.0.x	.NET 3.1	结束03/2021
5.xx	.NET 5	结束01/2022
6.xx	.NET 6，.NET 7，.NET 8	结束01/2025
7.xx	.NET 7，.NET 8	✔️
8.xx	.NET 8，.NET 9	✔️

警告

不支持静态渲染 - 了解更多。
我们不能保证与出版商不再维护的浏览器的兼容性。为了获得最佳体验，请使用最新的浏览器 - 请参阅《大球队支持的平台》。

统计

贡献

感谢您想贡献！
社区的贡献使Mudblazor成功。

如果您熟悉诸如C＃，julazor，javascript或CSS之类的技术，并希望还给您一些东西，请考虑提交拉动请求！我们试图合并所有非破坏错误的错误，并将考虑新功能对社区的价值。请注意，不能保证您的公关会合并，因此，如果您想在投资工作之前确定，请首先与团队联系。

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

入门

我们在Mudblazor.templates存储库中提供了预制模板。

完整的安装说明可以在我们的网站上找到。

快速安装指南

安装软件包

 dotnet add package MudBlazor

将以下内容添加到_Imports.razor

 @ using MudBlazor

将以下内容添加到MainLayout.razor或App.razor

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

将以下内容添加到您的HTML head部分，它是index.html或_Layout.cshtml / _Host.cshtml / App.razor具体取决于您是运行WebAssembly还是服务器

< 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 " />

接下来，在body末端添加以下内容

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

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

 using MudBlazor . Services ;

 builder . Services . AddMudServices ( ) ;

用法

< 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 " ;
    }
}