MudBlazor

料理的材料設計組件

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	✔️

警告

1. 不支持靜態渲染 - 了解更多。
2. 我們不能保證與出版商不再維護的瀏覽器的兼容性。為了獲得最佳體驗，請使用最新的瀏覽器 - 請參閱《大球隊支持的平台》。

統計

貢獻

感謝您想貢獻！
社區的貢獻使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 " ;
    }
}