.NET 6 Blazor 🔥 MudBlazor UI Component Library - Installation & Layouts

hey friends Patrick God here and welcome to this little mud Blazer tutorial I was asking in the community tab of my channel what component Library do you use or what do you want to see here on this channel and clearly mud Blazer was the winner I was looking at Mud Blazer well I wanted to have a look at my blazer for a long time and now I decided to do this together with you so what we're going to do today is in this really short tutorial or is it a tutorial really well kinda maybe because we are going to install and have a quick look at Mud Blazer together today we install modblazer first the template because this is one way of using mud places you can install the templates and then build your Blazer projects from there or if you already have your Blazer project or you just want to use the default templates by Microsoft then you can install modblazer afterwards and this is also pretty pretty easy and after we installed modblazer then we will have a look at the layouts they recommend first and then that's already it so if you are a lazy coder like me and do not want to use your time to do this stuff by yourself then please keep watching because now you're doing this together and then we will see how beautiful a Blazer application can look all of a sudden alright so if you like this video then I would really appreciate it if you click the like button and maybe consider subscribing to my channel this means a lot to me really really the channel is growing so fast lately I'm Amazed by that and I am so grateful so thank you so much everyone for subscribing to my channel and of course don't forget to hit the Bell icon because with that you get a notification when a new video is online additionally maybe the newsletter is something for you guys because then you get these kinds of videos earlier in your inbox also maybe other articles I started writing on medium by the way so if you want to read tutorials additionally to watching videos please stay here don't stop the video and go to medium maybe this is something for you then check out the newsletter and and you will get early access to the upcoming.net6 web developer boot camp this is maybe the official name of the next course and this is a big one because I want to focus on all the skills you need to get a job and well make a good job do a good job in the.net world of course we focus on that in six web development with a Blazer the web API e of course SQL server and also other stuff like this Asia it's stuff called scrum and maybe also a little bit of devops so if you're interested in this kind of stuff then please consider subscribing to my newsletter and last not least I've got some coffee again can you see this I don't want to want to put coffee on my keyboard thank you so much everyone for supporting me with some coffee I can really need it you know drill the knights are short but the days are even longer thanks to my little awesome guy who is now well 21 and a half months young great guy I love him okay enough about that now enjoy mud Blazer alright here we are already first let me show you what I want to show you show you what I want to show you this is perfect English let me show you what we're going to do here now in this tutorial so we are on modblazer.com and it is really really easy to use mod Blazer here the Blazer component Library you always want it right and you see how beautiful it looks but let's do this real quick we go to getting started and there are two ways to install and use mud Blazer first you can use a template so if you want to use the CLI you can just enter.net new install modblazer templates and then from there that you can create a new mod Blazer Blazer web assembly a project for instance or if you have a project already or you want to use a custom project then you can add the mod laser package and then you have to configure this a little bit now I want to show you both versions here both variants with a visual studio 2022 so let's start visual 2022 Visual Studio 2022 there it is all right and now first let's continue without the code and install the templates so this is the first thing I want to do and after that we do this stuff manually so when my machine wants to Just for information we are on version 17.1 so 17.2 is not available [Music] shortcut and now let's have a quick look again I think we will have a look here real quick very often so.net new install multiple laser templates following template packages will be installed so success my blizzard templates is available and now what we can do is we can create a new project with file new project and then a mud Blazer should be available here there it is already so mud Blazer templates hit next you see here by the way dotted Mario Blazer app now this is only available because I've got the preview installed and now also in my non preview visual studio version I can use this here interesting right but now my blazer templates let's call this mod Blazer templates one that's perfect and here's the project though that's nice we can choose really to be honest I did not do this before not prepared at all I just saw this and thought okay I want to try this let's make a YouTube video out of this and now we are here so you can see you can choose the project type wasm which is webassembly webassembly hosted this is something I really like because I really often use the hosted project type or the solution type server as well and the pwa meeting Progressive web app so let's try the hosted one hit creates and let's see what's what's happening Visual Studio almost crashing let me take a zip of my coffee okay dependencies are loading I guess but what I already like is we see the client project the server project industrial and the shared project so standard stuff actually but now let's see in our main layout which we should see something different there it is you already see all the mods Blazer components this is really really great this is what modblazer is all about actually you I say rarely use the built-in components then with blazer even if you use edit forms for instance you can then choose to use the matte Blazer components and if you don't know what an edit form is also here I will create a YouTube video or when you're watching this this YouTube video is already out and I hope I did not forget to add the info card here so this is it I would say we just started now and then let's see how our Blazer our default Blazer application then looks also we've got the nav menu this one looks different right with the matte nav link and also the pages I guess yeah we've got the mod text mod button and so on fetch data with the table here side note my table is using the virtualize component internally so this means that when you use it for each the performance should be much better where is it now there it is all right nice so as you can see this is not the default Blazer application and we've got material design here this is our menu with this button here we've got the fetch data page where we get an error this is nice I didn't do anything but we already get an error here let's see let's have a look real quick a network tab let's reload this okay something is not working here but maybe this is not for for uh for this session here for our YouTube video I actually just want to show you this way real quick so uh this is how this page looks and now let's remove this completely and do this manually because I guess the typical way would be you've got your Blazer application already or you want to use the default template and then add mud Blazer to this thing so let's do that now we go back to visual studio we stop the app when I find the actual or we just close the project Maybe or we create a new one now let's close it close solution okay now let's try this again create a new project this time a Blazer webassembly app let's call this a much Blazer test because I wanna push this to GitHub 36 correct and also asp.net core hosted with that we already got the server so you can just grab the code then from GitHub and have your template ready if you want to use it and now let's try this maybe there's an issue on my side maybe the default template is uh broken in general mod Blazer test there it is see now you have the comparison the direct comparison fetch data now here it works okay nice all right so this is our default Blazer app let's close this and also let's close this little window here okay I chose is Express maybe this was the difference because I was looking for the terminal window but there was no terminal window no comment prompt or anything okay anyways get the share project server project and the client project and now what we can do we just do it as it is stated here so.net add package mod Blazer let's do it the lazy way so manage new good packages mod Blazer in the browse tab always doing this mistake mud Blazer this is everything you need of course we've got something else here like the theme manager for instance but let's start with the mud Blazer package you see almost half a more than half a million downloads this is great and uh yeah what I saw didn't do much with a mud Blazer yet I haven't done much with bad blood mod Blazer yet kind of a tongue twister sometimes but what I saw so far was really really nice so now I'm at Laser package is installed in the Imports rewrite come on hide this here in our Imports file now we add mod Blazer now in the index.html there it is we have to add some stuff okay I'm gonna place them in CSS for the CSS stuff and the Google font Roboto seems to be the default font here okay then a script reference as well in the end of it okay so let's add it here our JS file we register the services so let's go to the program CS you can see here that it is a bit different in.net6 right we've got the uh we do not have the main method anymore so 1.6 we add Builder services at mod services maybe let's do this here and we also add the reference using my blazer Services there it is and now the components add the following components to your main layout note that the theme provider is essential for mod Blazer but the rest is optional okay let's try that so now we go to our main layout again in the shared folder main layouts let's just remove everything here add this stuff and now we see that we see nothing well these are just the providers right the theme providers essential but if you want to use dialogues as the snack bar then we also need the provider but great thing I think is that we can really start from scratch here we have nothing at all so no design no components here but what we can do now is as they are asking us already ready for more yeah please show me the layouts and this is again what I wanted to show you here as you can see this is not the complete um the complete main layout file so we need these providers and this is a really minimalistic design I guess so let's add this here pay attention to the body here so we have the body again so this is the place where our contents are rendered then and as you can see here this is now our index Razer file all right well not that interesting actually but there is more of course and now we can also add an app bar and a draw so let's try this one out go back to visual studio main layouts and how doesn't that look now okay okay A bit better a bit better I guess and now what else functionality because we added the components directly takes the height of our app bar basic functionality the mud icon button is used to open the nav menu and we also have some code here so let's choose this stuff again edit here maybe format this a little bit my nav menu is not here what they were saying let me close the drawer and we will add our nav menu for basic navigation ah there it is mod on F menu eraser looks like this okay so let's go to the nav menu grab everything all right save for this now go to the main layout this is also called nav menu and I think this should be it let's see yep there it is okay good service users and so on but um maybe what we can do let's just use the original addresses like fetch data counter and so on so let's see we've got the home which should oh actually this should be it let's say we've got our counter page this is actually called home by default and yeah here we can see that we've got some sub menus and it's just the fetch Data Page Maybe fetch data fetch data so this would be the group let's remove this one don't need this okay so let's save that now let's have another look this is the home page okay and fetch data all right and this is here for the actual draw or the sidebar you name it and that this is how this works with bind open this is uh what we have to bind to open and close this stuff okay so these are in essence already the layouts and the last thing they recommend here is using the content and container components so when we see when we have a look here what main content is already here but as you can see it's pretty close to the to the top and to the to the left side here and out to the right so maybe with the mud container we can change this a little and also Center this so this is then the mud container let's save that have a quick look it's rebuilding yeah maybe a bit better I leave this up to you but you see now this is how fast really you can add much Blazer to your application and now when you want to use more well there are wireframes this is something you can try out for well typical designs maybe you have the dashboard grid pricing wireframe there it is so you can choose this one by the way I am not paid or anything by mud Blazer it didn't even ask me to make this video I'm just really really yeah Amazed by this product by this component library and I definitely will use this for future courses or tutorials because I like this stuff and I want to learn this stuff and the last thing I wanted to show you are all the components because as you can see here there's really lots of stuff similar to yeah angular material for instance or bootstrap you name it there are so many component libraries out there but I really like that only thing I am missing currently is a drag and drop like you have lists and cards in there and I want to drag and drop them I think this is still missing so maybe team mud Blazer if you're watching maybe this is something you can add on your roadmap so that would be really really nice and for everyone else I really recommend having a look at Mud Blazer and if you want me to make more videos about mud Blazer and go deep and explain the uh all the components here because I know I just used the layout stuff but didn't really explain anything here then please tell me that in the comments but I think I will do this anyways but again it would be really nice if you if you tell me if you want to see that for instance really explaining what is what really is the provider what is the mod app bar what is the mod icon button because as you can see here mod Blazer comes with a lot of icons and you can also add other icon sets here like font awesome for instance you can change the color so that you see lots and lots of parameters events here the on click event is also a parameter this is why we don't use the at here and the lowercase o to call this method and so on so lots and lots of stuff we can do and maybe you have an idea and in that case I would be really happy if you tell me that in the comments again okay this should be it let's have a quick look again beautiful right really like that there you have it guys if you want to get the code well it's the default code so anyways head down to the video description and then go to the GitHub repository there you can get it or you just do this by yourself and then you have all the default stuff I think I will do more mod Blazer of course on this channel if you have a special request something you want to see like the load icon or the load is it a bar progress bar something like that they got there I think this is really interesting maybe we do a crowd application with mud Blazer and edit form with mud Blazer I don't know lots of stuff we can do actually wanted to build a recipe app with Blazer and maybe we can use mud blazer for this one this is really an own itch I want to scratch because every single day well I I'm asking myself what am I going to cook today and what do we need to buy for this dish and I think that kind of app would be nice but of course this is not something small this is a big one if you learned something with a mud Blazer and you think mud Blazer is awesome please tell me that then I will do more with mud Blazer and maybe you also want to hit the like button and even subscribe to my channel it doesn't make a difference thank you so much for that and don't forget to hit the Bell icon because then you get a notification when I uploaded a new video again also the newsletter might be something interesting for you in particular for the upcoming.net6 web developer bootcamp because you will get early access to this thing if you're subscribed and the last thing again thank you so so much for everyone supporting me with lots and lots of coffee I love coffee and I turn coffee into these tutorial videos here so it's just great great stuff thank you very much for your time thank you so much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 28,786

Keywords:

Id: 0bOP3HheD2k

Length: 21min 57sec (1317 seconds)

Published: Tue Mar 01 2022