How To Use Material Design Components (Web) In A Svelte App - SvelteJS Material Components Tutorial

hi there i hope you're doing well today we're going to look at how to use google's material design components just the plain old web versions that you can find at material.io inside of a svelt project as felt kit project per se although i'm guessing that the same methods would work this is just the normal svelt official template that you can find at the sveltjs repo um and just to to show what we're going to be implementing here uh we're going to build a reusable button component that works in svelt without using any kind of wrapper or anything like that there's a few projects out there that use a wrapper method to get this to work including svelte materialify is one option and there's a few others for compatibility reasons and just not liking too many packages and middlemen i i prefer to just use the the code straight from google's material.io site here so that's what we're gonna do um and what this gives us for the button component is just this nice ripple effect that you can see as i'm as i'm clicking this button here the process that we're following here should work for most of the components on the page all of them are a little bit finicky and not obvious how to set up but if you follow the the basics here it should give you a good start towards getting this to work so we're going to first go to github.com felt js slash template this is just the kind of standard vanilla if you will template um that's available in the official svelt repo we're going to scroll down the page a little bit and go to to these two commands we're going to copy them i'm going to use command c on my mac if you're on linux or windows it'll be ctrl c and i'm just going to flip over to my terminal here this is just my standard terminal on my mac and i am going to figure out what folder i want to use i had pre-made a folder called felt material and that's what i'm going to go into then i'm going to paste those commands right there in in some terminals you're not gonna be able to paste so you might have to just type them out um but on mine i can paste so now i'm just gonna hit enter it's gonna download the repo from github and move us into the folder that it created okay so so now we have this folder called sveltapp that's in turn inside of my folder that i earlier created called svelt material and i'm going to open this up in visual studio code by typing code space dot um if you want to do that that's something that you're going to have to set up yourself if you haven't already otherwise you can just open up the folder in any text editor however you want and all the instructions here should work exactly the same way so when i hit enter it's going to open visual studio code here and the first thing that i'm going to do is open up a terminal by kind of swiping up from the bottom there and typing in npm install which is going to go ahead and install all of the dependencies that we need this is a little bit big so i'm going to make it a touch smaller all right now that went ahead and installed so next we're going to install a few more dependencies that we need to make this work specifically a number of uh roll-up plug-ins and node packages needed to make sas work which is what is needed to make google material components work this is really nice to have in your project anyway even if you aren't using material design so i wouldn't sweat too much about doing all this and you know it's possible that there's different configurations and bunches of packages that would work with this this is just the specific mix that i've found that works so if you're following along i'd recommend just trying this exactly because it's pretty finicky so i'm going to do mpm i hyphen uppercase d to tell npm that these are going to be dev dependencies and then i'm going to type in [Music] auto prefixer node sas post css sas and svelt pre-process okay and hit enter and it's going to install those and it's probably going to take a minute or so here and i'll fast forward all right the installation completed and i just want to note that at a certain point in the installation it seems to freeze up a little bit but if you're just patient and let it go it usually goes through so the next thing we're going to do here is just see if our dev server is working so i'm going to type in npm run dev to get that up and running i've got some other projects going here so it's not taking port 5000 which probably will on your computer but i'm just going to copy this here we're at localhost colon58322 and open it up in my browser in this case i'm using chrome i usually use firefox but today we'll be in chrome and this is what we've got so this is the svelt app that was set up for us from this repository here and before we get going here i want to just clean this up a little bit and take out some of the things that we don't need so the first thing that i'm going to do is go into the public folder here and click on index.html down here i'm just going to pull out this reference to this global.css stylesheet i'm just going to delete that line because i don't want any other styles messing with what we're doing here and while we're at it we can just delete this global.css file right here all right so that's everything i wanted to do in the public folder uh we'll move down to the src folder which is short for source i'm gonna go into the main.js file here and i'm just gonna pull out these these three props lines here this is also gonna work if you don't do it but we're not gonna be using that so i'm just gonna clean that right up and then we're going to open app.felt which is also in the source file and this is the main component that we see on the screen here in fact you can see that this this turned back to an old font because i already started to pull out some of the styles but we're going to pull out the rest of the styles that are here in the app.felt component and then we're going to pull out this markup between the main tags and we're also going to pull out this prop export there we're going to save it so literally all that we have left is the opening and closing script tags here and then we have a nice clean project with nothing here so we can move forward with implementing the the the google material design components so now if we go to the page on google's site this is material dot io slash components slash buttons and if you flip over to the implementation tab here and you make sure you're on web there's a few other options just choose web here we're going to find another npm package that we need to install so i'm going to copy this here and [Music] open up a second terminal here and paste in that installation command and hit enter that's going to take one second here all right that's done so now if if you look into our package.json here you can see that we've added a few things that weren't there in the original template so in our non-dev dependencies down here we've got the material button and we also added this felt preprocess we added sass we added post css we added node sas and we added auto prefixer now before we get into actually implementing this there's uh one more thing we've got to do which is make all of this actually work in the bundler so we're gonna go up into the rollup.config.js file and we're going to make all the stuff work okay so i'm gonna go right here and type in import svelt preprocess that autocompleted some stuff that isn't exactly what i wanted so i just want import svelt preprocess from svelte preprocess in quotes okay just just like this and then down here under plugins go to this closing curly of compiler options type a comma and hit enter and then type pre process colon and then open some square brackets then we're going to type in svelte preprocess and then we're going to open parentheses and we're then we're going to open curly's and hit enter we're going to type source map not production comma unless you want it then you can just write true there and then we're going to do post css colon and open curlies and we're going to do plugins colon open square brackets require open parentheses uh insert quotes and type in auto prefixer okay um then when we hit save it's gonna gonna format itself and add in some more commas depending on your on your text editor and then we should be good to go so i'm just going to leave this here for a second so you can see what it is and remind you one more time that you also need this all right so now that we have that set up we're going to go ahead and get started with actually implementing this stuff the first thing that we want to do is in our app.felt file here we're going to open a style tag here and to make sure that these styles are applied globally and not locally scoped which is something that is needed to make this work at least in my experience we're going to type global a global here and then we're also going to type in lang equals scss like that and when we go back here you'll see that the next step is to copy over this line of code that implements google styles okay and this isn't css this is sas and that's why we had to install all that stuff before and why we have to type in this language here but if we go ahead and paste that line of code in here we should now be applying those button styles from google that we installed with this package here globally through our app.felt component okay so i'm going to go ahead and save that nothing will have changed here because we haven't actually added anything yet but we're still just working on some setup and now this has all been pretty straightforward so far but there's a few more tricky things that we need to do to actually make this work you would think that we could just go right in our app file and pull all this in and that would it would work and and maybe some of you can make that work but i couldn't so the way that i got it to work was by doing another component here which honestly is a better approach anyway so we're going to create a new file here and call it material button dots felt you can call it whatever you want but that's what i'm going to call it and in material button we're going to open and close the script tag here and we're going to import on mount from svelt okay now unmount is just a a tool that svelte gives us that that's built into the framework that lets us execute certain code only after the html has has mounted so the way that you call that is by going on mount and then doing the call with parentheses there and then we're going to open an anonymous arrow function inside and that's we're gonna uh where we're gonna put the code that we want to run and this is one of the tricks to make this work but before we do that we we need to import the ripple effect that that's going to show up on the button by copying over this line of code so i'll put this down under the on mount import up here so now we're importing on mount and we're importing mdc ripple okay then we're going to take this line of code here and we're going to copy it inside of the on mount call here like that all right and then down below we are going to copy over just this simple code from the text button here as markup below the script tag here okay so now if we go over here let's see am i still on the same oh it's not showing up because we haven't pulled it into our app.feld file yet so what we're going to want to do to make it actually it actually show up here is inside of the the script tags here in app.felt we're going to import material button from dot slash material button dots felt in the real world i'd probably put this in some kind of a utilities folder because we're gonna make it a reusable component um but for simplicity here we're just gonna do it all in one folder and then below the script tag um where we typically put the markup i'm just gonna insert that button there like that and hit save and we'll see if it shows up here all right we've got it showing up here and you can see it's got the ripple effect and everything but there's one problem what happens when we copy it over a second time well we've got the ripple effect still working here but it's not working on the second one here i'll make this a little bigger so you can for sure see it we've got the ripple effect working here but it's not working here so let's let's fix that and the way we're going to fix that is by giving each button a unique id okay so up in this line of code in the on mount call here i'm going to switch the query selector to get element by id and there's a bunch of different ways you can do this but this is just the way that that i'm choosing to do it i'm going to pass in what's going to be a prop here of id and to make this work down below we've got to say export let id to allow us to pass in the id prop from the parent okay and then from here i can do id equals for example one and id equals for example two and then we're passing in the ids of one and two respectfully into this material button here and then the last thing we've got to do is inside of this button tag here we can just like this say id and the reason this works is because in instead of doing id equals id like that just because they're the same name we can just shorten it to just id and curlies now if we save that we should be getting working yep ripple effect on both of these buttons so that's generally how you make it work when you're using multiple components ins felt is you put the component naked if you will inside of its own component then you make sure each of them has their own unique id so that uh the initialization with with google's code doesn't get confused okay so just to kind of complete this up um what i also would do is is pass in a text prop and an on click prop now i would prefer to just define the on click function right in here but it doesn't quite work again at least i couldn't get it to work it seems that it doesn't work that way with with these types of imported components so we're just gonna do also props for the the button text or the label and then we're gonna do a prop to pass in the function that you want to run when you click the button okay just like this so we've got just just to recap these three let us pass in props from the parent component this id is being used here to initialize the component with google's code and then we're passing it in here which is going to give the button element the id of id in this case one or two text is come is going to come in once we do it from the app.felt component and that's going to be printed as a label instead of undefined undefined it's going to say whatever we pass through and then the on click function is what's going to run when the button is actually clicked from the parent component so we can do this by we'll say text equals first button and text equals oops and text equals second button and then we can pass in the on click function um so we're gonna just do something simple like console.log you just clicked the first button all right so copy that over [Music] here and we'll say you just clicked the second button so now we've got two instances of the button each with unique ids which again is required to make this work unless you're doing some kind of a loop over all the components which you might be able to do but this is just a very clean way of making it work in my opinion we've got unique text and then we've got uh functions all being passed through as props to the material button here and now if we open up our console here you can see when we click the first button it's going to say you just click the first button and when we click the second button it'll say you just click the second button and we've got the ripple effect working in both cases if this isn't working for you try going back and doing it just exactly the same way again or maybe looking at the exact version numbers that i showed in the package.json file this is pretty finicky but honestly i i really like the solution because it's a good way of doing buttons anyway it's it's good to build your own reusable components and so it's really not that much more hassle to do this stuff to be able to use the the material uh components that google so kindly gives us and again to me it's just a little bit cleaner than using some some middleman library that kind of copies over the google code and then builds it into its own wrapper i always find that kind of thing just not to be the the best approach it's usually a little bit behind there's usually lots of quirks and and what have you and uh don't get me wrong this method isn't perfect either but it's just my preferred approach so hopefully it helps somebody else out there if you have any questions go ahead and drop them in the comments i may or may not be able to see and answer them but you can definitely give it a shot hope this helped somebody and hope you have a good day thanks bye

Channel: Sam Cook

Views: 3,251

Keywords: Svelte, SvelteJS, Material, Material.io

Id: -6Hy3MHfPhA

Length: 22min 8sec (1328 seconds)

Published: Mon Sep 27 2021