The Best Blazor UI Components? Let's Get Started with MudBlazor UI for Blazor | Blazor Topics

[Music] hello everyone and welcome back to ek academy with a new blazer topic it has been a long while a long time to introduce a new topic in blazer right now we are coming back but with a very awesome topic and as we have said last year like the upcoming year is going to be booming for a placer and basically this is what's happening yesterday or maybe the day before i've just passed across um an awesome website and i just said okay i'm gonna share this with you directly and have repaired something very great for you so basically you know that blazer because if it's in you and still developers like trying to adopt it there is some cool components ui available out there from the community like and design for blazer and rads and all this stuff but like having a very complete one for blazer just like you can compare it with other components available for react.js for example like we are still too far from that but with this component that we see in front of you right now on the screen like things started to get different this is this is my personal opinion but what i see like this is the best ui component that you can find out there this is like it's 100 complete very easy to use and the great developers behind that just basically did an amazing job to provide us with those awesome components very very simple so as you can see from the first look of course you are going to recognize that this one is following the google's material design in terms of like the color and the styling but okay i'm not a big fan of that but still it's the components out there is just awesome you can go ahead and i think it's enterprise ready components so let's go ahead and discover a little bit and let's see what i have prepared for you here so if you go to the motherblazer.com you're going to see this website and here you have to get started very easy to get started just install the package and here you can follow the steps so you have access for all the components that's available so let's see what the component they have if you go to the components here look at that you have a huge variety of different components that sweets for all your needs like starting from alerts with different styles and look at that you can see how it's simple to use you can have like some advanced components like the app bar like a few ui components that has such a such a flexibility to give you uh sometimes you need to go ahead and build that with yourself so you have like this cool one and look at that you have it's very very easy to use you have avatars and we have badgers and what else like patterns we have a variety of buttons so and look the code is very simple so once you get started with motoplazer you are going to be very productive this is what i have seen we have a bunch amount of cards that's basically fits also our needs like we have a very simple card and we have like a little bit advanced and we have more advanced one just like a post or something like that and if you look the code it's very very very simple and clear so this is magnificent like when i checked it for the first time i was oh wow this is just awesome it deserves not only a video but much more i think many blazer developers will go ahead and start adopting this one here still in the charts it has only three few charts but uh it's going i i'm sure like the community one this one becomes very popular it's not uh published recently i think it's it has been published in the late 2020 but like right now it has become some it's just getting popular and popular so we have we have look at that if you spend some time just covering the components you will see that it has all the stuff that you basically need to build a very clear and clean clean code as well not only from the ui perspective with having all the capabilities that you want so look at that look at the code here it's very simple we have drawers over here look at this how cool is that and if we go for some cool components yeah i was amazed with this one like the file upload is very advanced very cool look at this you have multiple portable stuff multiple styles and here we have drop and drag files here on click so we have for the forms we have some advanced controls like autocomplete and this stuff okay you wanted that and we have this checkbox field forms look at the forms they are very cool it has support for the edit form and they have support for their own form called mod laser form it's just awesome it has a very like powerful validation like look at that if you click validate and if i try to set them data like that personal i agree and i really agree so look at that it and this is the traditional edit form this is the float validation so you see it's just awesome in real time and here you have all other steps here you have a powerful grid you have a highlighter i like this component like it's uh it's very cool look at that maybe first okay first oh look at that this is very cool and like you look at the component it looks cool and if you look at the code as well it's very short and clean we have message box we have menu so look at that we have lists nav menu overlays paper i like this paper like just a set of elevation over here we have picker for date and time we have this cool one i like it so much like sometimes it's very useful to have a pop over we have also some cool indicators look at that and we have this skeleton over here for loading look at this this looks just awesome and we have tables tables is very advanced as well like this is a very simple table this is one has a support for pagination and search as well and you're going to find also sorting multi selection uh fixed header look at that so i think it's 100 enterprise ready i like that so much and i will start adopt this in my project starting from today we have tabs and we have this one look at that this is just great just a great okay we have some doll tips over here tree view and we have typography so look at this this is very clean and if you click over here you have a dark mood you can customize the theme that you want and you have right to left if you are trying to have like arabic for example it's just supported with that easy here there is a section called customization you can take a look at that so you can see how you can customize the seam and all the stuff you not only those two colors available you can customize it the way you want so if you follow as i've said that get started here if you go to the installation you can see how you can get started with that so this will give you access to the normal components and but if you if you get started and you want like this ui like you want this nav menu and you need like this app menu and this nav menu how we are going to do this this is basically what i have just done i have like cloned their project on the github i highly recommend you to go to their github and hit the star maybe donate with something because it's a fantastic job like you're going to save a lot of time and a lot of efforts about that so um i cloned this project i checked the documentations here and i tried just to make something simple for you so you you don't want to waste your time with the styling of the stuff so i prepared this very simple repository for you here so just go ahead clone this one and you have a simple placer application that you have usually but this time like it has by default the multiplayer ui component so let's see how you can get started with this so simply click on the code click on open with visual studio for example i'm going to click open okay yeah everything as it is let's click on clone of course you prefer the get cli or something you can just type get clone set the url uh clone command exit okay yeah that's fine that's fine uh maybe there is a little issue over here let me close this one and what i'm gonna do is to take this url i will open my favorite decline tool called get kraken so go for this one i click clone repo set the url and browse for example i'm going to choose this scope let's say okay and no desktop and or yeah let's set another place maybe here open source select folder clone the repo so that's it open now okay this is the repo and right now if i go for that folder open source look at that matte blazer sample so you see the images and this blazer and here we go this is you have a very basic laser web assembly application but it has everything you need to get started so if you open up this project and what we can do as well is to go for the code i think i'm in the wrong folder over here yeah this one this is the project let me open up the cmd and i will type the comment.net watchline uh first you need to resolve but yeah anyway it's going to take it take responsibility for this stuff and let's see oh look at that this is a normal blazer application but with the purple design but this one is for multiplexer so you can directly go ahead and get started you have a demo page here this is just a sample like to show you a test i'm always going to add from time to time and new pages over here so it could be page it could be used somewhere else so look at that click login we see the school message look at the design of this i liked it so much if you click login with the other password you are going to see this so this is just great and for the getting started here you already have access for those pages the traditional blizzard one this is the fetch data and if we switch to the dark mode look at that this is fancy basically we can switch from right to left left to right very easy so whenever you want just go ahead and clone this project and you are ready to go so and yeah i hope you liked it and don't forget not not to go to my repository but to go to their repository which is i'm gonna share the link in the description box below and to hit the start button for this amazing work because basically it deserves more than that and the great news is i know that planner app i have launched that course maybe last year and like i got a good number of viewers a good number of people i have received a lot of cool comments from you about the that course and it was pretty simple i didn't follow all that stuff all the like a great technology available in blazer because it was still in the preview and it was just the first thing i i introduce in blazer so i made it for the very very beginner people and right now because we liked it and because we have the api out there and we have the code also of the client so let's make a part two of that let's try to re-innovate this application and provide it with this fancy ui we have here with all these cool features and made some slightly changes to the code and divide the components maybe in a better way so we have a more efficient application and then you will see how you are going to integrate this one and uh yeah how to refactor maybe do some refactoring so maybe we are going to make a one long video that we take the client that we have we bring motherblazer for it and then we start to re-innovate like okay this components we can divide it into two three components we re innovate the register and the login and the stuff so yeah it's going to be a perfect journey if you if you agree with that and you are really interested for this so please uh share that with me in the comments so i know that you are really interested for that to do this and apply that for the planner app in a one long video or maybe we can make it like a short series for innovation and i really hope like you like this video you like these components and also you like this pretty sam pretty simple sample available for you here so you can find as i've said all the links in the description box and thank you so much for watching don't forget to hit the like the subscribe and the share button and see you [Music] you

Channel: AK Academy

Views: 27,000

Keywords: Software Development, Visual Studio, Xamarin.Forms, C#, .NET Core, .NET, Microsoft, Programming, AK Academy, Ahmad Mozaffar, Blazor, Blazor WebAssembly, Web Development, Visual Studio Code, ASP.NET Core, Desktop, Window, Windows 10, Mac OSX, Linux, Blazor Topics, MudBlazor, UI Components, design, Blazor WebAssemlbuy, Blazor Server, GitHub, MudBlazor Material Compoennts, Material Design, UI language, Enterpris ready template, development, single page application, full stack .net web

Id: sM7ZWwzclMk

Length: 14min 48sec (888 seconds)

Published: Mon Feb 08 2021

Reddit Comments

[u/blazority]

Please give Blazority a try as well for comparison. We have solid set of components with fully functional datagrid and many new components (date picker, calendar control, and range picker) coming out in next release.

[u/kamilero]

Blazorise is also really nice. It has a vibrant community and is quite well documented. blazorise.com

[u/ArunITTech]

Try Syncfusion Blazor Components

[u/MarcoTheFirst]

I've tried many frameworks, and MudBlazor is by far the best in terms of flexibility, completeness and especially quality. As a company owner I decided to become a sponsor of MudBlazor, and I can only urge everyone to do the same. If we all pitch in, the framework will continue to grow. After all, being a sponsor is usually cheaper than buying a commercial license of a large scale framework.

[u/anddrzejb]

What about https://antblazor.com? You should try it out.

[u/boikom]

What about https://www.htmlelements.com/blazor/blazor-ui/demos/? It has some nice UI components like DataGrid, Scheduler, Kanban, Pivot, Chart, Gantt