Blazor- MudBlazor

[删除（380066935@qq.com或微信通知）]

---

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.

MudBlazor/MudBlazor: Blazor Component Library based on Material design. The goal is to do more with Blazor, utilizing CSS and keeping Javascript to a bare minimum. (github.com)

Quick Installation Guide

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();

Usage

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

  }

}