MudBlazor：基于Material Design风格开源且强大的Blazor组件库

项目介绍

MudBlazor是一个基于Material Design风格开源、免费（MIT License）、功能强大的Blazor组件框架，注重易用性和清晰的结构。它非常适合想要快速构建Web应用程序的 .NET 开发人员，无需费力地处理 CSS 和 JavaScript。由于MudBlazor完全使用C#编写，因此你可以自由地调整、修复或扩展该框架。文档中有大量示例代码，能够帮助开发者快速理解和学习MudBlazor框架。

Blazor是什么？

Blazor是一个使用 .NET框架和C#编程语言Razor语法构建Web应用程序的UI框架，它可以用于构建单页应用（SPA）和 Web服务，它使用编译的C#来操纵HTML DOM来替代JavaScript。Blazor 的目标是让开发人员使用C#编程语言来编写 Web 应用程序，使得C#程序员可以在一个熟悉的编程语言中完成整个应用程序的开发。这样既可以提高开发效率，也可以减少学习成本。

• 全面的ASP.NET Core Blazor简介和快速入门

项目源代码

组件库引入

安装NuGet包

dotnet add package MudBlazor

将以下内容添加到 _Imports.razor中

@using MudBlazor

将以下内容添加到App.razor中

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

将以下内容添加到index.html中

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

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

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

using MudBlazor.Services;

builder.Services.AddMudServices();

Bar Chart

Basic Pie

@using MudBlazor.Components.Chart.Models

<div>
    <MudTimeSeriesChart ChartSeries="@_series" @bind-SelectedIndex="Index" Width="100%" Height="350px" ChartOptions="@_options" CanHideSeries TimeLabelSpacing="TimeSpan.FromMinutes(5)" />
    <MudGrid>
        <MudItem xs="6">
            <MudText Typo="Typo.body1" Class="py-3">Selected: @(Index < 0 ? "None" : _series[Index].Name)</MudText>
        </MudItem>
        <MudItem xs="6">
            <MudSlider @bind-Value="_options.LineStrokeWidth" Min="1" Max="10" Color="Color.Info">Line Width: @_options.LineStrokeWidth.ToString()</MudSlider>
        </MudItem>
    </MudGrid>
</div>
@code
{
    private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.
    private ChartOptions _options = new ChartOptions
        {
            YAxisLines = false,
            YAxisTicks = 500,
            MaxNumYAxisTicks = 10,
            YAxisRequireZeroPoint = true,
            XAxisLines = false,
            LineStrokeWidth = 1,
        };

    private TimeSeriesChartSeries _chart1 = new();
    private TimeSeriesChartSeries _chart2 = new();
    private TimeSeriesChartSeries _chart3 = new();

    private List<TimeSeriesChartSeries> _series = new();

    private readonly Random _random = new Random();

    protected override void OnInitialized()
    {
        base.OnInitialized();

        var now = DateTime.Now;

        _chart1 = new TimeSeriesChartSeries
            {
                Index = 0,
                Name = "Series 1",
                Data = Enumerable.Range(-360, 360).Select(x => new TimeSeriesChartSeries.TimeValue(now.AddSeconds(x * 10), _random.Next(6000, 15000))).ToList(),
                IsVisible = true,
                Type = TimeSeriesDiplayType.Line
            };

        _chart2 = new TimeSeriesChartSeries
            {
                Index = 1,
                Name = "Series 2",
                Data = Enumerable.Range(-360, 360).Select(x => new TimeSeriesChartSeries.TimeValue(now.AddSeconds(x * 10), _random.Next(0, 7000))).ToList(),
                IsVisible = true,
                Type = TimeSeriesDiplayType.Area
            };

        _chart3 = new TimeSeriesChartSeries
            {
                Index = 2,
                Name = "Series 3",
                Data = Enumerable.Range(-90, 60).Select(x => new TimeSeriesChartSeries.TimeValue(now.AddSeconds(x * 30), _random.Next(4000, 10000))).ToList(),
                IsVisible = true,
                Type = TimeSeriesDiplayType.Line
            };

        _series.Add(_chart1);
        _series.Add(_chart2);
        _series.Add(_chart3);

        StateHasChanged();
    }
}

更多组件库样式展示