MatBlazor vs. [MudBlazor, Bootstrap Blazor]

[pomeara]

I am interested in using this project but I find that the material design has not really taken off in general hence I want to strip matt blazor out and add a more useful Blazor UI into the project. There are a few more powerful libraries available such as BootstrapBlazor which is much more powerful

Bootstrap Blazor GitHub
Bootstrap Blazor Example

[GioviQ]

In fact the UI should be plug&play with default UI modules refactored in separate modules without UI.

[enkodellc]

@pomeara if you take a look at the project you can create a new project in the following folder to do another theme. If you want to submit a PR with another UI then add it there. I am not opposed to switching away from MatBlazor but I personally won't be writing it as I don't have the resources. @GioviQ what do you think? Would it be fine if people submit PR's for other UI's?

src/shared/modules/BlazorBoilerplate.Theme.XXX

[GioviQ]

e.g. in https://github.com/enkodellc/blazorboilerplate/blob/master/src/Shared/Modules/BlazorBoilerplate.Theme.Material/Pages/Account/Login.razor

move code in abstract class to avoid code duplication, then create alternative UI.

As I discovered MatBlazor is almost dead, so it is better to use MudBlazor for Material Design.

[enkodellc]

I have not seen MudBlazor before, that looks pretty well developed from an initial glance and looks like active owner.. I know SamProf is not very active at maintaining... I am not judging as I am not very active on BB.

I am not tied to Material Design. I just liked it at the time and thought it would be fun to learn component building so I chose MatBlazor. Open for discussion. I also agree that Material design hasn't taken off / as much as Bootstrap, just my opinion.

[Stephen250]

I have actually been switching my BB based app from MatBlazor to MudBlazor. As MudBlazor is more active.

I find MudBlazor is great for the responsive aspect, and it is fairly clean and crisp.

In addition, they have a built in theme manager where you can switch Colors on the fly without the need for CSS.

Which would in theory would close question #347.

Took me about 2-3 days to switch my entire application over.

[pomeara]

I'll have a chat with Argo (the author of bootstrap blazor) I've been using his blazor UI for quite some time and it's really powerful but I will admit may need some adjustments to fit into this template. I am happy to work with Argo in the process of adding an extra UI layer. @Stephen250 would you consider adding your MudBlazor UI into this project as an example about how to go about adding an extra UI layer ?

[wvmstr]

MudBlazor is in an earlier stage I think, so they are still ironing out bugs on some of their components. I like the look and feel of things. Every component has several code examples, which you can try out at try.mudblazor.com, play with it, modify, expand before even integrating into your app. Much nicer that dealing with bootply. I seem to recall that one of their features is they use no js for their components. I don't know if that is at all possible.

[enkodellc]

@Stephen250 is your app public? Just curious if we could take a look.
@wvmstr thanks for your feedback, I am interested if they can actually do all the features with no js as well.

[Stephen250]

@enkodellc, unfortunately it is a private app. So at this time I would not be able to display it.

I did base the majority of my changes off of this template:

https://codewithmukesh.com/blog/blazor-hero-quick-start-guide/

This template, gives a solid idea as to what you should expect of MudBlazor.

As I get closer to a release I will consult with the owner if they are will demo.

Unfortunately, I am on a time crunch to finish this project right now so I would not be able to do a PR.

[enkodellc]

@Stephen250 thanks for sharing, the questions would be what issues you ran into and did MudBlazor cover most of your component needs. I was almost certainly planning on using Grid.Blazor. What did you use for grid in your production app?

[Stephen250]

@enkodellc, I actually used the built in MudGrid with the Breakpoints feature.

Grid: https://mudblazor.com/components/grid

Breakpoints: https://mudblazor.com/features/breakpoints

The two of them work very nicely together, given we live in a much more mobile friendly world,the way the breakpoints work with the grid is very intuitive.

I've built my app for 1080p (1920x1080) but was able to very quickly adapt it to larger and smaller screen sizes.

Is that possible with Blazor.Grid, possibly but the key features that led me to switch were the following:

• The breakpoints and responsiveness
• The built in theme manager (color, typography, etc)
• The tables, I find are very clean, plus the way they have built in the filtering is very intuitive.
• Dialog Service: being able to build out your dialogs based on a template and render them from the code behind.
• Active community

From a glance, I believe the majority of components within MatBlazor exist in MudBlazor, as of right now, I haven't really hit any major issues, just takes time to switch all the components over.

[GioviQ]

I used MudBlazor for https://mudblazor.com/components/datepicker

[Garderoben]

@enkodellc @GioviQ if you are interested about making a switch, i would gladly help you doing so.

I did the theme/template for Blazor Hero for @iammukeshm
Also seen in our repo, and live demo: https://templates.mudblazor.com/

https://github.com/Garderoben/MudBlazor
https://github.com/Garderoben/MudBlazor.Templates
https://github.com/Garderoben/MudBlazor.ThemeManager

[GioviQ]

@Garderoben does Mudblazor have a replacement for https://www.matblazor.com/Toast too?

[Garderoben]

@Garderoben does Mudblazor have a replacement for https://www.matblazor.com/Toast too?

Yes, but we call it Snackbar
https://mudblazor.com/components/snackbar

[GioviQ]

The UI is only in the 3 Material modules in https://github.com/enkodellc/blazorboilerplate/tree/master/src/Shared/Modules
If @enkodellc agrees, I can think a PR is welcome.

MatToaster can be replaced in https://github.com/enkodellc/blazorboilerplate/blob/master/src/Shared/Modules/BlazorBoilerplate.Theme.Material/Services/ViewNotifier.cs
and
https://github.com/enkodellc/blazorboilerplate/blob/master/src/Shared/Modules/BlazorBoilerplate.Theme.Material/Module.cs

[Garderoben]

I noticed some people thinking there would be components missing etc not only in this thread but we get that question now and then. I made this list quick, its not 100% accurate and is probably a bit in our favor since i know our components better.

I took out all the component names from each library's component folder.
https://docs.google.com/spreadsheets/d/1BIFxQr7_F3uG02LytXhehwfR2puKUViWDh43e8nmJCk/edit?usp=sharing

We also provide allot of CSS class utilities for the people who want to use it, such as all MudBlazor Theme Paillette colors, Material colors, border-radius, display, elevation, flex, and spacing.

And my long term goal is to make it more than just Material Design, we have a Theme provider that exposes all Typography, Elevations, Color Palletes, and some component sizes.

MudBlazor is in an earlier stage I think, so they are still ironing out bugs on some of their components. I like the look and feel of things. Every component has several code examples, which you can try out at try.mudblazor.com, play with it, modify, expand before even integrating into your app. Much nicer that dealing with bootply. I seem to recall that one of their features is they use no js for their components. I don't know if that is at all possible.

We have some Js for the absolute necessary things, we archive most design/effects with pure CSS and sometimes a little help from C#

The UI is only in the 3 Material modules in https://github.com/enkodellc/blazorboilerplate/tree/master/src/Shared/Modules
If @enkodellc agrees, I can think a PR is welcome.

MatToaster can be replaced in https://github.com/enkodellc/blazorboilerplate/blob/master/src/Shared/Modules/BlazorBoilerplate.Theme.Material/Services/ViewNotifier.cs
and
https://github.com/enkodellc/blazorboilerplate/blob/master/src/Shared/Modules/BlazorBoilerplate.Theme.Material/Module.cs

I will probably not do everything for you in one PR but if you plan to implement MudBlazor i will most certainly help you out :)

[wvmstr]

@Garderoben
Forgot to mention that I am using MudBlazor for the apps I am working on. I especially like MudTable, MudSelect, and the Dark mode implementation.

I like the visuals too. All clean, and light weight.

[enkodellc]

Thanks for everyone's feedback and support from @Garderoben. I am completely open to a PR for MudBlazor. SamProf has not responded in a couple weeks now so long as @GioviQ agrees and doesn't have any other underlying BB changes.

@GioviQ is there any more coding remaining to make this happen? "In fact the UI should be plug&play with default UI modules refactored in separate modules without UI."

@Garderoben I will try and find time to review your project some more soon. At first glance it looks well written and documented. I applaud your effort. I hope to find more time to dive in deeper and possibly contribute.

[henon]

@enkodellc wrote:

I am interested if they can actually do all the features with no js as well.

No, we had to use JS in a few places of course but MudBlazor is almost JS free if you look at the percentages on github:

This means that any C# desktop developer who has a bit of understanding of Blazor will be able to contribute or fix bugs.

[GioviQ]

@Garderoben I am starting to convert https://github.com/enkodellc/blazorboilerplate/tree/mudblazor/src/Shared/Modules/BlazorBoilerplate.Theme.Material
to
https://github.com/enkodellc/blazorboilerplate/tree/mudblazor/src/Shared/Modules/BlazorBoilerplate.Theme.MudBlazor

Can you help me to understand why @Icons. is not found?

[Garderoben]

@Garderoben I am starting to convert https://github.com/enkodellc/blazorboilerplate/tree/mudblazor/src/Shared/Modules/BlazorBoilerplate.Theme.Material
to
https://github.com/enkodellc/blazorboilerplate/tree/mudblazor/src/Shared/Modules/BlazorBoilerplate.Theme.MudBlazor

Can you help me to understand why @Icons. is not found?

Did you fix it? i downloaded your project last night to have a look, but its fairly complex. Could it have to be with the different layouts being used from the other domains? or does @iCons maybe already exsist?

[GioviQ]

It was a namespace conflict. I fixed it, thanks.

[Garderoben]

It was a namespace conflict. I fixed it, thanks.

Hows it going for you, stuck anywhere?

[GioviQ]

My goal is to switch from one theme (MatBlazor) to another (MudBlazor) keeping the underline code.

At the moment I've got to change pagination logic due differences from paginators.

[GioviQ]

Next week I'm busy and I will not work on https://github.com/enkodellc/blazorboilerplate/tree/mudblazor

It is a work in progress, but with last commit you can run it.

Anyone interested to fix layout, write css, etc. ?

[Garderoben]

Next week I'm busy and I will not work on https://github.com/enkodellc/blazorboilerplate/tree/mudblazor

It is a work in progress, but with last commit you can run it.

Anyone interested to fix layout, write css, etc. ?

I would gladly help with the more "front end" stuff.
But currently working on 5.1.0 for MudBlazor, when that is done i can give it ago.

Anything i should know?

[GioviQ]

See https://github.com/Garderoben/MudBlazor/issues/2416

[enkodellc]

@Garderoben I implemented Mudblazor on my production project. Works great, with some extra components. Awesome job! I will refactor the readme and landing page from BlazorBoilerplate soon as it will be the new default component theme for BB. Thanks to all the hard work from @GioviQ for integrating MudBlazor.

[Garderoben]

@Garderoben I implemented Mudblazor on my production project. Works great, with some extra components. Awesome job! I will refactor the readme and landing page from BlazorBoilerplate soon as it will be the new default component theme for BB. Thanks to all the hard work from @GioviQ for integrating MudBlazor.

Nice! Happy to hear you guys made it! If you want, make a post in our Who's using MudBlazor i will display the best projects in that thread on a new section on MudBlazor website.

And if you don't mind, what extra components are we talking about? i can already guess a few but its good to know.

[enkodellc]

@Garderoben, I typed my message too hastily. I meant to say is the Mudblazor has MORE components and features so it was great to have additional flexibility. It is very professional and I wish I made the move sooner.

From my initial take I would like to see a few things which I might try and submit a PR for. I am still using Bootstrap for layout and some other CSS functionality so I will need to learn more about MudBlazor layout.

I initially had a bit of frustration working through the documentation as I was used to MatBlazor. I did like the way he put the examples and all the methods / properties on the same page. You do have the links but I feel that should be more pronounced to a button vs link button. Just my opinion. Or even some text that say Review Properties and Methods in the Api BUTTON. Very minor criticism :)

Additional component ideas:

1. Palette to include DialogTitle background or an DialogOption that sets the title background to Primary Palette. I used some additonal CSS for the dialogs as I use them a lot, I would assume people do and the dialog options are great! The overflow CSS I feel should be default. Here was my additional CSS:

.mud-dialog-title { color: white; background: var(--mud-palette-primary); } .mud-dialog-title .mud-icon-button-label{ color:white; } .mud-dialog .mud-dialog-content{ overflow-y: scroll; }

2. I liked the MatBlazor file upload / Drag and drop / click to Browse. I used your demo but I think it could be its own component "FileUploadDragNDrop"

`.drag-drop-zone {
display: flex;
align-items: center;
justify-content: center;
transition: all .4s;
min-height: 75px;
}

.drag-drop-input {
position: absolute;
width: 100%;
height: 90%;
opacity: 0;
cursor: pointer;
z-index: 2;
}

.drag-enter {
box-shadow: var(--mud-elevation-10);
}`

                <MudPaper @ondragenter="@(()=>_dragRLEnterStyle="drag-enter")"  @ondragleave="@(()=>_dragRLEnterStyle=null)" @ondragend="@(()=>_dragRLEnterStyle=null)"  Class=@("drag-drop-zone "+ _dragRLEnterStyle)>
                    <InputFile OnChange="LogoReverseFilesReady" class="drag-drop-input" accept=".svg" />
                    Reverse Logo: Drop a single file .svg Here or Click to Browse<MudIcon Icon="@Icons.Material.Filled.AttachFile"></MudIcon> 
                </MudPaper>

[Garderoben]

@Garderoben, I typed my message too hastily. I meant to say is the Mudblazor has MORE components and features so it was great to have additional flexibility. It is very professional and I wish I made the move sooner.

From my initial take I would like to see a few things which I might try and submit a PR for. I am still using Bootstrap for layout and some other CSS functionality so I will need to learn more about MudBlazor layout.

I initially had a bit of frustration working through the documentation as I was used to MatBlazor. I did like the way he put the examples and all the methods / properties on the same page. You do have the links but I feel that should be more pronounced to a button vs link button. Just my opinion. Or even some text that say Review Properties and Methods in the Api BUTTON. Very minor criticism :)

Additional component ideas:

1. Palette to include DialogTitle background or an DialogOption that sets the title background to Primary Palette. I used some additonal CSS for the dialogs as I use them a lot, I would assume people do and the dialog options are great! The overflow CSS I feel should be default. Here was my additional CSS:

.mud-dialog-title { color: white; background: var(--mud-palette-primary); } .mud-dialog-title .mud-icon-button-label{ color:white; } .mud-dialog .mud-dialog-content{ overflow-y: scroll; }

2. I liked the MatBlazor file upload / Drag and drop / click to Browse. I used your demo but I think it could be its own component "FileUploadDragNDrop"

`.drag-drop-zone { display: flex; align-items: center; justify-content: center; transition: all .4s; min-height: 75px; }

.drag-drop-input { position: absolute; width: 100%; height: 90%; opacity: 0; cursor: pointer; z-index: 2; }

.drag-enter { box-shadow: var(--mud-elevation-10); }`

                <MudPaper @ondragenter="@(()=>_dragRLEnterStyle="drag-enter")"  @ondragleave="@(()=>_dragRLEnterStyle=null)" @ondragend="@(()=>_dragRLEnterStyle=null)"  Class=@("drag-drop-zone "+ _dragRLEnterStyle)>
                    <InputFile OnChange="LogoReverseFilesReady" class="drag-drop-input" accept=".svg" />
                    Reverse Logo: Drop a single file .svg Here or Click to Browse<MudIcon Icon="@Icons.Material.Filled.AttachFile"></MudIcon> 
                </MudPaper>

I initially had a bit of frustration working through the documentation as I was used to MatBlazor. I did like the way he put the examples and all the methods / properties on the same page.

Just to clarify, you would like to see the api page by default when navigating to lets say /components/alert?
Asking so i know, because that could be a nice feature for docs. And just save the user setting in local storage

[gofab]

I have a question regarding MatBlazor. Has it stopped developing? I can't see the project is active at all.