Blazor with Material Design Framework - MatBlazor (Part - 1)
Hello. Everyone welcome to doctor training academy in this video we are going to learn, how to use a material design user, interface with, Blazers pop framework, if, you haven't heard about the material design it is the design principles. And design framework assist introduced by Google and the. One of the major advantage of using material design is more realistic those kind of elevations, and components, are arranged in a realistic manner which, makes a application, user interface fantastic. So. The second advantage of using material. Design in particularly web sites or web applications, which. Makes a look and feel of the mobile application if you are an Android users especially. Open. Up the visual studio here. I'm going to select a spherical, web application. Laser. Material. Design. And. I. Assume that you guys are already installed a spin attack or 3.0. In. Select blazer server-side, and. I'm using preview six here. Here. I want to push. This report push the source code to the repository which is the github repository you. Know I'm going to create a new repository. Laser. Right, here. So. Just create. Over here. And. Copy this URL. And. I assume that you guys have already installed it and on, ticket. Get. In your machine. So. First we have to push that and you have to paste the URL over here to push this, code into our repository. Here. It is you, just successfully pushed the, blazer. Are so sore into the kit and you, can also download, this. Source code in the gist a basic. Laser files. Are available over here so the first thing that we need to do is to just check whether it is running correctly so for that control fi to debug, this application. I'm. Sorry start without debugging this, application, okay. Here. Is application. Works fine and the, second step is now we are going to install material. Design which means the new gate package which is NuGet. Package of building. Material design which is called mat blazer, over, here and the. First thing that we have to do is to install the mat lays a package over here. Go. To package manager console and. If you are not at all using Visual Studio you can go ahead with the dotnet, command to install this package which, is dotnet, add a. Package, of matt blazer which, is available over here. So. That's it and the next thing is let's. Just. Check this application. By. Inserting. It in somewhere, so. Let's create a map button. Over. Here. Hello. Material. So. Let's just run this application. And here. Is it is not actually, applying. That particular material design. Thing the, reason is we have to add extra. Library. To, connect with the server-side, laser okay so, basically this is the same site blazer so we, need to add another library. And. That. Library is installed. -. Package. Ne. Peut okay laser. Contact, - version, one. Point, two. Point oh that's, it. So. It's installed, perfectly now, we have to configure this guy in starter, starter, gracias. Okay. Let's go to these startup taxis. To. Configure this timbered blazer content and. Over. Here in the configure service configure application, configure, we. Have to configure this. Thing at. The. Odd. Use. Ember. Here. We need to input. Laser. Content. And. We have to say. It s an assembly, that. It it's, all now, good to go and also, we need to, add. This thing in the head. Section which. Is available in the host or C HTML, so. Over here, what I can do is. That. And if, you see over here right now right. Click. View page source, you. Cannot see any material, design. Thing, over here because. We haven't said, that component, so. Now we have to add, the. HTML dot, M dead. Bird. Blazer. Content. Over. Here yeah. Let's just run this application again, let's. Check. Oops. We have to add the Umbra.
We Have to add the name space over here that's fine at, using. And. Laser. Content so now everything is fine. Just. Run it again. Now. Here it is here's the button which is appearing over here and. And. If we see this. Thing which is the inspect element or the view page source go. To the head section you. Can see the man plays Urkel you. Can, screen the script mad laser dot J's. As well as the Roboto, and material icons fonts. So. Here. Is some in page space is, there let's clear it out. The. Very first thing that we have to concentrate is to use this AB bar over here so, for that I'm going to go to the share and in terms of that I'm going to go through the. Nav. Menu and, I'm, just going to. Comment. All the codes over here. In. Da. Instruct. This code I'm going to use the material. Material. Blazer coats, Matt, ad board container, which. Is a container. I'm. Going, to use the mat a power component. It will arrest inside of that mat lab, for and. I'm going to said fix, it is equal to true just. A CSS style property where as we said that a bar, fix-it is equal to true where if we scroll down it, will be stay, there, then. Matt, app. Bar. Row, is, the another, element. And. Finally. Matt. App, bar. Section. And. Instead. Of using, this. Guy right here. And. We. Need a little better piece, is gonna cure. You. Just close. Everything. And. Comment. This thing and just, time. And. Here, it is we just finished. Ad, body. So. Now let's just shake that around so. No. Check now, we're gonna check by turning this application with her. Here. It is fantastic. This is what we expected we just get the exact, output that we, expected. So here, in. Go to the nominee, we just. So. Here we just come under all this thing so I'm, going to copy and paste. Paste. Inside, he. Sees. Inside over here as an a blank, instead. I can change. Everything. And. You can see these things are not aligned properly so, for that we have to use the, property. Holder aligned, at. Matt. App. Bar. Section align tuck end and this, will and. This. Will makes this links, over, here it's basically, by default it's in the start but we have to make that in the end and, also. We need to add. Add. An, a blink class to. Make that spacing. And padding's those kind of things so now it's just run it again to. See the changes. It's. Already running it's. Just close enough and. Here. It is everything is perfect so, not, only that I'm also going to add up the icon. Not. Only that I'm going to add an icon over here just like the menu so, for that I'm going to add another section Matt as our section. So. It's, basically going to be aligned over, the start, so I don't need to care about that and I'm going to use the icon over here Matt. Item. Button here is something called s button with icon you have to use the component, called Matt icon button and, icon. And, here. You can see that a lot of icons available. For. This particular thing and which is available in description you can go edit act whatever icon that you want and. Now. In in this case we have going to use the menu icon, so. Let's just close this and run this stuff again. Here. Is the exact, output which we expected, is the button with the icon. So. Not. Only that we are also going to use the title bar. So. For that we have used Matt a bar title. So. Which is going to be the laser, material. Okay. That's fine. And. Here's. The output exact, output that. We. Imagined, and the. Next thing is I'm going to design this little, bit just. To create a container. Div. Class. Equals, the container and, this thing is from bootstrap so we can also mix, up these things if, we are using this material, designer. You can also remove. Completing the bootstrap chef and you can also stick with the material design which. Is metalizer so now and also going, to apply some style, over here like style of, padding. Of. 1m. As. Well as the, margin, of. 1. M so. This will be looking pretty nice so the next thing is here. We, are adding the, menu icon but. We, didn't have the drawer navigation, draw at home yeah so for the we have to fix that thing so.
It In a matte blazer table so, that I'm going to use JSON placeholder. Calm. And. Over here we, can see North fig Peters. In in that particularly, I'm going to use this. Post. So. First. Thing I'm going to copy this and I'm going to go to the JSON, to see Shawn's website. Whereas. That it helps us to create the generate a model for that so, let's, just do that so. Let's, come over here and type, core. Functions. This. Guy right here, the. Only thing is root object it's generated, over there but instead we can use course so, now let's create a, table and the next thing I have to create an array of proposed. Rules. That's, it, so. Now create. A component or math table. In here. And need to pass some attributes, whereas. The attributes, is going to be the tool, at. Poles and then. Second. Attribute is going to be the load initial. Data which, is equal to true as well. As the, Striped is, equal to true and then. Request. API, only once it was also it was true, and API. URL, is, going to be this URL, copy. This one and. Paste. It over here and, finally. Good. Turn. For. The by column, name which is equal to the title, and finally. And the. Debounce, milliseconds. Is going to the 50 so, let, me just explain everything, the items is the thing which helps us to populate, the, data over, here which is fixed from this URL and. Where, we mentioned, this guy right here as an array and the, second thing which is load, initial. Data which specifies, where to load the initial table data and, then. Striped put is equal to truth which is the table design of striking and request. API only once. Yes, specifies whether the request of the, API to fetch for me once or multiple. Times the kind of things is it default it will not face, the request API only once and then, EBA well as you know that it's there. It. Is the URL that we are fetching the data from and effective, icon name is the search filter, which which, helps the column to filter along. And. Finally. The d bombs will in seconds which helps to specify the delay, duration, between the user, input on the search field by, default it will be be about 800. And. Let's just create a table header. Header. Over here and, then just, use th. Over. Here, we, cannot see that in. 90. Here a user ID, and. Just. Title. In. My, stable you know. It's. TTE and. Here. They need to use the contacts dog. Lady. Okay. I think, everything, is fine right now let's, just try to run this application. Oops. We are getting an error the, reason it cannot provide a value for the property HTTP this is because by, default the map blazer is using. Dependency. Injection while, fetching the data so. Here, in the start of class we need to patch a recess so, recess. Don't add. School. Inside, of that we have to pass the HTTP, client. Yeah. And. That's. It now let's just try to run it again I'm going to close this server. Run. It again. Here. It is excellent. Let's. Just clean up these things which. Is just a little bit confusing. Getting. Beyond tag on here, in. And. Here it is and. Here. You can see the exact, data which, is fetched from the. API. Not. Only that we can also see the, populated. Data so here. And. 25. Just, like that and. That's. It. It's. Quite a very, similar to the data tables in the jQuery and it is very much powerful and you can also search, this. Thing is we got a title, let's search to type this qu, I. It. Will retrieve all the data from, the qu, I and let's, just try to say, Elam, I. And. M, so these are all the things which from, the elements, and in D 0 so this is what these. Fetch, API all it can do about so. So. We can also we, just change this to Phi we. Can also navigate from page one to page two first. Page. We. Can also adjust this navigations, like next, page next page last. And first. Kind. Of things and, this makes. And. This is what this makes and. Really. Cool bright so here, after we can use these, tables and, have things instead of using. Plain. Phone data, tables by pitching so. That's it and the next thing that we are going to look at is the. Typographic. In, mac later like. And. We. Just come, across the tables now, we're, just going to create some form, like. Text, field. Things. So. Let's, get started, so to do that we have to type in mat let's. Say some VR over here let's. Try to say mat. That. Text, field and. Here. We have to set the label as the. Post. Title. And also, we have to specify the full bit to sequel to true or, and then, you're, going to use, Matt, field the text area. And. Here. It's going to be the body. Force. Body and full width is equal to true as well, as the text area which, is equal to true. So. Now let's just see this thing. And. Here, is the post title as well as the post body this. Is the text area you can expand however, that you want and. Yes. That's it hopefully, that's it and let's, just try to sit and button some, environment, so, for that. Here. You have to sit button. And you can use the attributes, like, raised. And. Elevated, outline things, property. Attributes, and here, I'm going to say it's a race which is equal to crew and.
Let's. Just run it again. I. Just. Changed the vertical, route 200. Just. To appear that design. Issue so. Here everything is perfect so, here. You can see the. Sin. Post button over here and let's. Say clear out. And. We can also set raised equal to true and also. Outlined. Just. Equal to true. It's. Just this. Thing again. So. Here if we see over here it's elevated and perfectly, aligned and that's. It next thing that we have to talk about is the. Autocomplete. Which. Is very famous in most, of the, frameworks. And let's just stick to so. Let's just get into the autocomplete stuff so for that I'm going to use the element, called component, called Matt. Autocomplete. And. In. Before that I'm going to populate some data so. Let's say I. Say. The categories, of, the. Political post like category. Class. Category. Inside. Of that I'm going to use the property, of screen. Name. So. Let's just. We. Just neutralized, it and now let's just populate, it. Degree. Value, is equal to model and, just read an object of another. Value, also, I'm. Going to create an array, of respectively, category for. Options. Which is equal to new array. Of values. New. Category. Just, create a new, category. Over. Here I'm going to class this thing named Dubai, luckily. And. Overlapped. Elephant, in. That case. And. Just copy this or a. Couple of times. Wave. That development. You. Told. Mary. King so. That's. It I think so, the pics me not to public just a three values. No, let's. Get inside of this I can I mean, the math autocomplete. Yeah. I've already anything at. Your. Options. Populate. Of options and, the items, like we also need to set the type which, is basically the category. Label. Which is going to be deserted, yeah. No. It's. Better for us to. Get. Degree and then. Um. Custom. Screen, select are they, go to fact I. Dot. Name. Hmm. Well, finally. Just. Going, to fine. Well. Sequel. To Pat thank, you, so. That's it. In, silicon use this thing. Mmm. Complete. Side. Is equal to this play, place. And. Then, next, Direction, is going to be. Row. And, it, is going to be 200 person team. Now. Let's just use, this thing. And. Just. To make sure we can do some. Things like. Okay. Let's put a p10 and the. Silicon. Value. Is just equal to what. Well. We. Said. There's another little reference, okay, so, everything is fine that, is closest, and run it again. So. The. User, interface it's not quite good so, instead. We. Have to change this to. Instead. Of sitting VW, I can't fit it to 100%, age. And. Height. It also needs, to be deep on different so, here it is let's. Check whether, we are getting that thing no. Basically. The way W, is going to be seen. Now. Let's just run, this application down, here and, let's, see the output. And. Here, is. Yeah. It's perfectly working we. Type with app development, it's just Auto computing for us. And. Here. You can also populate, the rest data. Instead. Of doing, this kind of manual things and. That's. It for this part one this, video series is going to be continuing, in the next one because there's, not color in the man laser light ready so. That's, it for this video if you liked the video please like share to, your friends there are many ways we come in the below and, subscribe don't. Forget subscribe you, get more things in later seriously. I'm going to people and not, a laser, signal or videos, hereafter, so, please support. Me.