mudblazor / mudblazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.

Material Design components for Blazor

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.

Documentation & Demo

• MudBlazor.com
• Try.MudBlazor.com

Why is MudBlazor so successful?

• Clean and aesthetic graphic design based on Material Design.
• Clear and easy to understand structure.
• Good documentation with many examples and source snippets.
• All components are written entirely in C#, no JavaScript allowed (except where absolutely necessary).
• Users can make beautiful apps without needing CSS (but they can of course use CSS too).
• No dependencies on other component libraries, 100% control over components and features.
• Stability! We strive for a complete test coverage.
• Releases often so developers can get their PRs and fixes in a timely fashion.

Prerequisites

MudBlazor	.NET	Support
1.x.x - 2.0.x	.NET 3.1	Ended 03/2021
5.x.x	.NET 5	Ended 01/2022
6.x.x	.NET 6, .NET 7, .NET 8	✔️
7.x.x	.NET 7, .NET 8	✔️

ℹ️ Currently only interactive rendering modes are supported - Learn more.

Stats

Contributing

👋 Thanks for wanting to contribute!
Contributions from the community are what makes MudBlazor successful.

If you are familiar with technologies like C#, Blazor, JavaScript, or CSS, and wish to give something back, please consider submitting a pull request! We try to merge all non-breaking bugfixes and will deliberate the value of new features for the community. Please note there is no guarantee your PR will be merged, so if you want to be sure before investing the work, feel free to contact the team first.

Check out the contribution guidelines to understand our goals and learn more about the internals of the project.

Getting Started

Full installation instructions can be found on our website.
Alternatively use one of our templates from the MudBlazor.Templates repo.

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/>
<MudPopoverProvider/>
<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";
  }
}

mudblazor's Issues

Redesign theming and customization options

I will start redesignen the Themeprovider, specificly all root CSS vars, go thru every scss file and make sure they apply everywhere.
I will also look on how we can implement more options to the Themeprovider.

1. Primary Task

• Rework the CSS root vars.
• Go thru SCSS files make sure they apply everywhere.
• Create more mixins/sass functions to get cleaner code.
• Write more documentation on Mudblazor predefined CSS classes.

2. Secondary Task

• Add FontFamily/Typography options to Themeprovider.
• Add the possibility to change default spacing in the Themeprovider.
• Add the possibility to change default breakpoints in the Themeprovider.
• Implement a theme generator/color picker. (Outputs the text/code so users can easy test and see result directly and copy code)
• Extend the documentation on theming and how it works

I plan to start this task as soon as possible, probably after i'm done with #59 and #58 components.

Dialog

Documentation page needs at least this exampels

• Sending and Reciving data from dialogs
• Document how to use Dialog options and some examples.

Docs: API add a column for the default value of properties

Progressbar

Add Progress component

Web font icon support

Add support for Web Font icon for the MudIcon component.

• Documentate normal usage with built in SVG's
• Material Icons
• Font Awesome
• Document how to use Web Font Icons

Date picker: dialog version

As said in #39, we'll add a dialog version DatePicker later. Right now, everyone can do it themselves by combining Dialog with DatePicker, but ultimately we want to feature a readymade.

Add multiline/textarea feature to MudInput

Like https://quasar.dev/vue-components/input#Textarea

Select: click on the little triangle on the right doesn't open it

it only opens when you don't click the triangle

MudTabs missing scroll feature

Hi there,

If tabs grow out of parent container, there is no possibility to scroll.
A left/right button would be perfect at an overflow.

Broken Icons that had multiple SVG paths

Broken Icons that had multiple SVG paths.

Will have to re,do my import and probably change how we load them?

Style param for all components

Implemented for Buttons.
Base class MudComponentBase still needs to be added to all components and style="@Style" to their div

Tables missing virtual scroll feature

A very important feature for the tables is missing: virtual scroll.

Is it possible to implement that?

Add AutoClose Drawer on navlink change/click

Add AutoClose Drawer on navlink change/click

Plotly.Blazor component renders blank when MudBlazor is added to project.

I'm using a third party Plotly.Blazor component which renders fine until MudBlazor is installed. The issue seems to be with _content/MudBlazor/MudBlazor.min.css. For now my workaround is to move the fragment to individual component code rather in _Host.cshtml.

MudTabs missing scroll feature

Hi there,

If tabs grow out of parent container, there is no possibility to scroll.
A left/right button would be perfect at an overflow.

Vuetify like spacing classes

Vuetify like spacing css classes

• normal padding/margin
• documentation for normal
• negative padding/margin
• documentation for negative

Chipset: when removing one item, actually two are removed

Look at the example in https://mudblazor.com/components/chipset
Section Adding and removing chips

If you click Add three times, and then you remove the first Chip, two Chips are actually removed.

I think this is related to the property Deleted in Chip. See conversation in #87

And in the Chip component by itself, if you want to really remove the item that represents a Chip from your list of Chips in OnClose event, you have to put the RemoveOnClose property to false, if not, you remove two items from the screen (but only one from your list). The other item is in your list, but its marked as Deleted, so its not rendered

Form validatable Checkbox

The idea is to add Label, HelperText and ErrorText to Checkbox and display them when it is not Dense which should be default. So in a form you set Dense="false" (or HideDetails="false" ?) and then it will show validation errors.

Support for EditForm and built in validation

Will this library support the built in EditForm and associated validation mechanism?
https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

Tabs

Needs more examples and different options

Examples (for project starters/templates)

Hey team,

first, congrats on this wonderful project!
This looks awesome and very promising. Customers start to jump onto it for their Blazor applications :-)

One question, do have a timeline (or idea of it) when the samples will be available?

Thanks - and keep up the great work.

Toaster

_toaster.scss

• Go through it, simplify it
• Remove sass vars, add mud theme css vars
• Fix sizing problems with close button

Component

• Rename to snackbar and extend functionality?

Documentation page

• Different Severity examples
• Positioned example
  - [ ] Progress bar example
• Close Button & Require interaction examples
• Action on click exampels

Add Toggle function to IconButton

Add Toggle function to Button/ButtonGroups

Rtl Direction Support

Hi every body, I would like to use this good tools in my blazor applications
but I have a question
Dos it support localization and RTL direction and also responsive?
because it is for me a very essential issue.
Thank you very much.

Docs: document the responsive flex classes

We have all the responsive flex classes like Vuetify has them: https://vuetifyjs.com/en/styles/flex/

In the Docs we need a similar page for them because they are mighty useful and people should know about them

Slider component

Starting with:
Basic CSS styled HTML slider, with steps option.

Docs: Make the code examples horizontally scrollable if lines are too long

Static Alerts

Static Alert component

Add badges

Like here https://vuetifyjs.com/en/components/badges/

WebCompiler files are packed in nuget package

These two files appear when adding the MudBlazor Nuget package. I don't think they should be in the nuget package.

Radiobutton

Implement Radiobutton

Tooltip

Implement tooltip component

With delay option and different positions.

Select component

Basic select component with textfield options.

Drawer Anchor.Right does not work

Will stick to the left, see:
https://try.mudblazor.com/snippet/QkvluUlP500GbmsU08

Add rating component

Can I be assigned to do such a component?

Table

There are a lot of features that can be implemented for table:

• SimpleTable (no features, very simple use)
• Pagination
• Filtering
• Useing <td> instead of <MudTableCell> is supported
• better Dark Mode support
• fixed Header
• Single selection
• Multi-Selection (with CheckBoxes)
• Sorting

For later:

• Expandable rows
• Virtualization

Add CONTRIBUTING.md

• Document Web Compiler dependency

Docs: Expand spacing documentation with responsive classes

Expand spacing documentation with responsive classes

Will do before: https://github.com/Garderoben/MudBlazor/issues/69

Docs: Table API is broken.

https://mudblazor.com/api/table

probably because of the type parameter

Add Chip and Chipset

Chip: https://vuetifyjs.com/en/components/chips/#usage
ChipSet: https://vuetifyjs.com/en/components/chip-groups/

Menu

Add Menu component, probably based on MudSelect?

Accordion / Expander

MudMenu on TableRow

Hello all,

I was testing the Menu component into a table, but I've seen that the popup menu coordinates didn't wok as expected. Example below:

I took a look on source code, but didn't figure how to fix yet.

Form docs: replace custom classes with user-available classes

my-4
justify-center
we have those classes already
we should add a text-center class
then add Card parameter Width="400px" and we are done
also for the button: ml-auto
padding-bottom: 20px is pb-5

Table: hover not working in Firefox

this was reported by a friend of mine. he doesn't see the hover. we need to check

Could not add Mudblazor

Hi
I could not add the Mudblazor package. It's said Package restore failed.

Cycle detected. Mudblazor -> MudBlazor (>= 1.1.1). Checking compatibility of packages on .NETCoreApp,Version=v3.1. Checking compatibility for Mudblazor 1.0.0 with .NETCoreApp,Version=v3.1. All packages and projects are compatible with .NETCoreApp,Version=v3.1. Package restore failed. Rolling back package changes for 'Mudblazor'.

Add prepend-icon and append-icon to MudTextField

Adding support for prepend-icon and append-icon for MudTextField component

Date Picker

Implement Date Picker

• Base component

• Design

• Inline version

• Static version

• Dialog version

• Actual functionality with actual picking dates

Chip OnClose is never invoked

Hi guys!
First of all, awesome job and beautiful components! Thanks!

The Chip component never invokes the user's OnClose handler. I think the issue is in this method

protected async Task OnCloseHandler(MouseEventArgs ev)
        {
           await OnClick.InvokeAsync(ev);
            if (Command?.CanExecute(CommandParameter) ?? false)
            {
                Command.Execute(CommandParameter);
            }
            // Close code here? if user wants something to happen onclose click above?
        }

Instead of await OnClick.InvokeAsync(ev); should be await OnClose.InvokeAsync(ev);

Autocomplete improvements

We need these improvements on Autocomplete:

• On dropdown close coerce text back to selected item or empty if nothing selected (PR by HClausing)
• Call the search function on first click (impl. of search func determines if all are shown or none)
• Autocomplete should expose OnKeyDown, OnKeyUp and OnKeyPress events
• list item template