MudBlazor

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.razor或App.razor ：

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

添加到您的html head （ index.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修复了您报告的内容，请在本地测试预览版本，以确保您的应用按预期工作。

版本支持

提示

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

警告

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