Projects
MudBlazor is a program based onMaterial Design style open source, free (MIT License), powerful Blazor component framework that focuses on ease of use and clear structure. It's perfect for .NET developers who want to build web applications quickly, without struggling with CSS and JavaScript, and since MudBlazor is written entirely in C#, you're free to tweak, fix, or extend the framework. The documentation has a lot of sample code to help developers quickly understand and learn the MudBlazor framework.
What is Blazor?
Blazor is a UI framework for building Web applications using the .NET Framework and the Razor syntax of the C# programming language. It can be used to build single-page applications (SPAs) and Web services that use compiled C# to manipulate the HTML DOM as an alternative to JavaScript.The goal of Blazor is to allow developers to use the C# programming language to write Web Blazor's goal is to allow developers to write Web applications in the C# programming language, enabling C# programmers to do their entire application development in a familiar programming language. This increases development efficiency and reduces learning costs.
- A Comprehensive Introduction and Quick Start to Core Blazor
Project Source Code
Component library introduction
Installing the NuGet package
dotnet add package MudBlazor
Add the following to the_Imports.razorcenter
@using MudBlazor
Add the following to the
<MudThemeProvider/>
<MudPopoverProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
Add the following to the
<link href="/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/" rel="stylesheet" />
<script src="_content/MudBlazor/"></script>
Add the following to the relevant section
using ;
();
Bar Chart
<div>
<MudChart ChartType="" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="100%" Height="350px"></MudChart>
</div>
<MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText>
@code {
private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.
public List<ChartSeries> Series = new List<ChartSeries>()
{
new ChartSeries() { Name = "United States", Data = new double[] { 40, 20, 25, 27, 46, 60, 48, 80, 15 } },
new ChartSeries() { Name = "Germany", Data = new double[] { 19, 24, 35, 13, 28, 15, 13, 16, 31 } },
new ChartSeries() { Name = "Sweden", Data = new double[] { 8, 6, 11, 13, 4, 16, 10, 16, 18 } },
};
public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };
}
Basic Pie
<MudPaper Class="pa-4">
<MudChart ChartType="" InputData="@data" @bind-SelectedIndex="Index" InputLabels="@labels" Width="300px" Height="300px" />
</MudPaper>
<MudPaper Class="pa-4 mt-2 d-flex justify-center">
<MudButton OnClick="AddDataSize" Variant="" Color="">Add</MudButton>
<MudButton @onclick="RandomizeData" Variant="" Class="mx-4">Randomize</MudButton>
<MudButton OnClick="RemoveDataSize" Variant="" Color="">Remove</MudButton>
</MudPaper>
<MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText>
@code {
private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.
int dataSize = 4;
double[] data = { 77, 25, 20, 5 };
string[] labels = { "Uranium", "Plutonium", "Thorium", "Caesium", "Technetium", "Promethium",
"Polonium", "Astatine", "Radon", "Francium", "Radium", "Actinium", "Protactinium",
"Neptunium", "Americium", "Curium", "Berkelium", "Californium", "Einsteinium", "Mudblaznium" };
Random random = new Random();
void RandomizeData()
{
var new_data = new double[dataSize];
for (int i = 0; i < new_data.Length; i++)
new_data[i] = () * 100;
data = new_data;
StateHasChanged();
}
void AddDataSize()
{
if (dataSize < 20)
{
dataSize = dataSize + 1;
RandomizeData();
}
}
void RemoveDataSize()
{
if (dataSize > 0)
{
dataSize = dataSize - 1;
RandomizeData();
}
}
}
Time Series Chart
@using
<div>
<MudTimeSeriesChart ChartSeries="@_series" @bind-SelectedIndex="Index" Width="100%" Height="350px" ChartOptions="@_options" CanHideSeries TimeLabelSpacing="(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="">Line Width: @_options.()</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()
{
();
var now = ;
_chart1 = new TimeSeriesChartSeries
{
Index = 0,
Name = "Series 1",
Data = (-360, 360).Select(x => new ((x * 10), _random.Next(6000, 15000))).ToList(),
IsVisible = true,
Type =
};
_chart2 = new TimeSeriesChartSeries
{
Index = 1,
Name = "Series 2",
Data = (-360, 360).Select(x => new ((x * 10), _random.Next(0, 7000))).ToList(),
IsVisible = true,
Type =
};
_chart3 = new TimeSeriesChartSeries
{
Index = 2,
Name = "Series 3",
Data = (-90, 60).Select(x => new ((x * 30), _random.Next(4000, 10000))).ToList(),
IsVisible = true,
Type =
};
_series.Add(_chart1);
_series.Add(_chart2);
_series.Add(_chart3);
StateHasChanged();
}
}
More Component Library Styles
Project source code address
More useful features and characteristics of the project welcome to the project open source address to view 👀, do not forget to give the project a Star support 💖.
- Open source address:/MudBlazor/MudBlazor
- Online documentation:/docs/overview
A selection of great projects and frameworks
This project has been included in the C#/.NET/.NET Core Excellent Projects and Frameworks Selection, focusing on the excellent projects and frameworks selection can let you keep abreast of the latest developments and best practices in the field of C#, .NET and .NET Core, and improve the efficiency and quality of development work. The pit has been dug, you are welcome to submit PR recommendations or self-recommendation (so that excellent projects and frameworks are not buried 🤞).
- GitHub open source address:/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/
- Gitee open source address:/ysgdaydayup/DotNetGuide/blob/main/docs/DotNet/
DotNetGuide Technical Community
- DotNetGuide Technical Community is an open source technical community for .NET developers, aiming to provide developers with comprehensive C#/.NET/.NET Core related learning materials, technical sharing and consulting, project framework recommendations, job search and recruitment information, and problem solving platform.
- In the DotNetGuide technical community, developers can share their technical articles, project experience, learning experience, encountered difficult technical problems and solutions, and also have the opportunity to meet like-minded developers.
- We are committed to building a positive, harmonious and friendly . Whether you are a beginner or an experienced developer, we hope to provide you with more value and growth opportunities.
Welcome to join DotNetGuide Technical Community WeChat 👪!