MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure. It is perfect for .NET developers who want to rapidly build web applications without having to struggle with CSS and Javascript. MudBlazor, being written entirely in C#, empowers you to adapt, fix or extend the framework. There are plenty of examples in the documentation, which makes understanding and learning MudBlazor very easy.
Install Package
dotnet add package MudBlazor
Add the following to _Imports.razor
@using MudBlazor
Add the following to the MainLayout.razor
or App.razor
<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
Add the following to index.html
(client-side) or _Host.cshtml
(server-side) in the 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" />
Add the following to index.html
or _Host.cshtml
in the body
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
Add the following to the relevant sections of 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 {
public string Text { get; set; } = "????";
public string ButtonText { get; set; } = "Click Me";
public int ButtonClicked { get; set; }
void ButtonOnClick()
{
ButtonClicked += 1;
Text = $"Awesome x {ButtonClicked}";
ButtonText = "Click Me Again";
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。