Blazor with Material Design Framework - MatBlazor (Part - 1)

Blazor with Material Design Framework - MatBlazor (Part - 1)

Show Video

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.

All, We need to do is. To create navigation, drive. So. So. Here I'm going to create a navigation dryer. Which. Just comment this thing instead, of using this thing we can use navigation, drawers thing so, here, you. Can see them that. Dryer. Container. And. Close. This and set, the style of. Width. Is. Equal, to 100 VH and then. Right. Of. Hundred. We. H, it's not activated me H it V W, which is a vertical height and little bit and. And. Inside of here we have to. We. Have to create a mat draw model which is the layer which comes when we click that draw and, for that matter. At. By, -. Okay. Is. Equal to at, open. And. More. Is equal to at Matt, prior. Dot. More. So. Basically, or we, have to write some code over here by. Default I'm going to set Google, opened. Is equal to false because. It's. Not going to be opened when the application, is triggered and only, there even to sleep which means about an enemy, it needs to be gets. The value of true, so, button, click. Just. Created a button click method and open. I'm. Going to set open, equal. To, not. Open, which means basically it is true and it's, going to be false if it is false is going to be true so. Let's, just trigger okay, that's fine. And. And. In. This particular menu I'm going to call this thing like, on click. That. E. Okay. In. Here I'm going to create a mat draw, content. My. Prior, and. Then. You're. Going to paste this guy probably. Uncomment. It. Now. I just checked it out. Oops. We are getting the error we, don't need to use the bind, because that's the issue we. Can directly use that particular property or particular. Pillow. Here and also. We, have to use the class. Called mat drive we, have to use the numerator call in we have to use this mat trial, mode in him but model just to open, up the drawer so now let's just run this application and try, and. Here. Is the output and let's, just click this yeah this is what we exactly expected, and, here. We are knotted on using any JavaScript, over here it's everything completely, running using the. It's. Everything completely running using this particular, seizure. We, are not on used any Java Script code over here we, just used only the c-sharp and more. Specifically, blender for, this kind of interactive, things okay. Let's just see. Let's just fix this thing. And. Here. We need no longer need to use this. Yes. Hopefully now it will work. Control. Tip let's just close this it will make the problem is server. Now. Again. The same problem. See. Okay, we should, get rid of this guy I. Think. Prepare to use some. Star. Margin. Really, better also. Like to use the class called. Cleaner. Okay. That's perfect and now. If you see here there, is a blank thing over here there's, nothing menus or links over here so we'll just stick that by creating lists inside of this madrier so. Let's see how to create a list now this one is the draw. Navigation. Drive. Now. We, are going to create a list. So, for that we basically need to add a map. List. Through. Component. And also. Mat. List. Through. Some. Header. And. Here. It's going to be the. Dashboard. Something. Like that and. Now. Let us create a mat list. And. Here inside of that mat list item. They're. Going. To be the. Host. Pages. And. Media. And. Also I'm going to create another list, another. Sub header. Use. It. For, things. Profile. Password. Change. Password. In finally blogger, and, can. Also use the mat I can't just. Like that we specify and hold here and let's just run this application again. And. I think we also need to add. Matt. Or. Continent oh. Here. Let's just copy all the things. Got. This and these over here. It's. Just. So. I just added, the app bar content just to loot check to, whether, it is fixing that style issue we, can also fix that by using. The margin top or imagining a pattern but let's just trying with a filmmaker, fix. Yes. Exactly, it did and if we open up over here it is showing the dashboard, post pages media, account profile the list all the list which is exactly, needed. So. Now let's just take the counter, pages are working perfectly. Yes. Everything, is working and. Now. The, next thing is that we have to concentrate is the. Tables right. Basically. What we are going to do is to fix the data from the JSON, as a REST API and, populate.

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.

2019-06-19 14:28

Show Video

Comments:

Background sound

Like your trainings, can you make this click events less noisy or just add visual effect when you clicking on something ?

Ok sure, thanks for watching

This blazor thing looks promessing! any benchmarks about its perfomance?

I think we have to wait for their first stable release at this year end

Wow! First video about MatBlazor on youtube not from me. Thanks!

Thank you for creating this awesome library bro.

Nice. Looks MatBlazor is good combination for this SPA

your voice is too fast

@Dot Net I love the content though please keep it up you are on the forefront of something exciting!!

sorry for this, I will fix on my upcoming videos and set speed on 0.75x.

Hey friends, Hope you enjoyed and learned a lot in this video. Please subscribe to this channel: https://www.youtube.com/channel/UCYl5G87mJQJOOQoAevAzd5w?sub_confirmation=1

Excellent tutorial. Excellent pace. What was that at 30:49?

Sorry for that usually I take videos in my studio room but unfortunately this video took in my office. Anyway i will edit it

Because I have to put the prefix MatBlazor. in all the components? if it is not shown, I lost something ?

This is the code to use appbar: MatBlazor - Material Design components for Blazor Content You can also check GitHub link: https://github.com/dotnettrainingacademy/Blazor-Material-Design

I get an error: 'MatDrawer. does not contain a definition for 'Modal' on MatDrawer.Modal

Ah, I found the solution in you source code: MatDrawerMode.Modal

Error come while install EmbeddedBlazorContent package, Package EmbeddedBlazorContent 1.2.0 is not compatible with netstandard2.0 (.NETStandard,Version=v2.0). Package EmbeddedBlazorContent 1.2.0 supports: netcoreapp3.0 (.NETCoreApp,Version=v3.0)

Stop hitting your space bar so hard. I stopped watching about 4 minutes in as it was so annoying!

Just when I get tired of the node_modules folder

Other news