Quasar Components - Button

some components are just monstrous in the amount of stuff that you can do with them and q button is one of those components most of it is really simple but the amount of breadth we get from this component is just awesome and quasar does an awesome job of making everything always look really really nice for us now one thing i did in this video is i changed my eslinter from plugin view essentials to plugin view strongly recommended just because that helps me code a little bit faster by doing a little bit of extra formatting for me behind the scenes so let's go ahead and get this video started quasar new page and we'll call it q button page but we have to whack it in the components directory and now if we open up our menu bar there it is q button page and we can go ahead and get started so some of the basics q dash button will make this a self-closing tag as buttons often will be and then we'll put in here a label that is equal to push me save that and there we go we've got our push me button if we want we can also throw that directly inside of the button so we can take the text push me out of here whack it in there and we get the same result so that's one good thing to know that you can put stuff directly inside of the button another thing we can do is change the color so let's set it to primary and there we go it changes straight away for us however if we change it to something like green dash 2 notice that the text is a little bit too white against that button well in that case we can say text color is equal to gray dash 9 for example and it will change the text color so we can easily see that button now we can also say no dash caps and that's just going to remove the automatic capitalization because by default all buttons are going to be capitalized now there may be situations where you want a little bit more control over your colors and in general it's probably best just to use the color palette that quasar gives to you however if there's situations where you want to use your own colors just say style and then throw it directly into a style tag this is totally fine some people will think oh no css sitting inside my components but these days it really doesn't matter that much because it's usually just bits here and there so let's say the background is equal to 20 20 20. make that a hashtag and that's going to make it sort of a dark grayish background and i'm going to set the text color here too this is something i prepared earlier e 6 9 3 d 6. i kind of remember what that color is so this will be a surprise ah very nice pink and by the way something cool even though we use the style tag here if i click on this button we still end up with a pink ripple so i don't even know how it does that but somehow it knows the effect to use for the ripple it must be based on this color so i reckon that's pretty cool all right let's get rid of that maybe move it back to a different color like purple yeah that's how we usually do coloring now there's a lot of types of buttons that we can play around with like flat and that's going to remove the background however when you hover on it you get a little bit of that color back so this is really nice if you want a button that isn't too emphasized we can also say on elevated and before i do that let me just cut that save it so notice that we've got a bit of a shadow here that makes the button look like it's elevated a bit unelevated is just going to remove that shadow so i do this sometimes if i feel like the page is getting a bit overwhelmed by buttons we can also say outline gives it an outline button so you might want to use that glossy which i usually absolutely hate but there are some situations where it's nice to have a glossy button and also push i really like push if there's a button that i've that i want to draw a lot of attention to or if it does a really big action so for example if there's an ajax request that's kind of like a final request for the entire page so they've done a whole bunch of um set up in a form for example and then this button sends that request that does a lot of things i'll make that a push button just like a personal preference of mine and another thing of course is we can add icons really easily to the buttons so let's add a save icon like that we can also whack it onto the other side save and if i copy that down we can have a icon on either side and sometimes you may want the icon and the text to stack and in order to do that you use the word stack and now the icon is going to sit on top of the text that can be really handy especially if you don't have a lot of room on the page we can also make things rounded so let me get rid of stacked and if we make the border it adds a beautiful nice round feel to it and so you want to use rounded if there's stuff inside of your button however if it's just an icon then you can use round but look at what happens if i use round and there's a label notice how it kind of messes up so you only want to use round if there's one thing sitting inside of your button so let's get rid of the label there and now it looks good or you can get rid of the icon and change the label to just a letter so for example l and that's something that you might see in an app where it's kind of like the google phones app where it has contact lists and it's just got the letter on the left side so this is kind of like an avatar but it's a button you can also have your own custom content sitting inside a button so how am i going to do this how about we get rid of that for now we make it so we can have stuff sitting inside of the button and let's put inside here text yes you've already seen something like that but if we go to our cue avatar component i can grab this avatar component here and throw it straight into the button like that and there we go now ang is sitting inside of the button but in this case i probably want to remove that styling from the avatar yeah and there we go you can just throw stuff directly into the button and it still works nicely now avatars have a set size so that's actually making this image smaller if we get rid of the avatar part then it's going to grow to the size of the image so buttons will grow depending on the content inside them if you throw content directly inside of the button like we have here we can also add in some text here how about aang because that's his name and this is probably a classic example where you would want to add stack to the button yeah there we go so it's pretty cool how we can throw stuff inside of our buttons let's bring it back to what we had before just something really simple and moving on so have a look at this we're going to put our own content inside of the button remove the label there put a div in there and just save that for now all right so we've got a blank button and we'll put a class on this div that is ellipsis that is a really annoying word to spell and that's a class that quasar gives us and now we can put some text in here lots of text in here and to get that ellipsis to kick in let's say style is equal to width of 70 pixels and there we go it's got a set width of 70 pixels and then we're going to have a few dots at the end there and honestly i can't think of a lot of situations where you'd use this maybe if you don't have enough room for your button on a mobile device or if you're using a button a whole bunch of buttons to show blog posts so something like that in fact a better example would be this let's make that a column yeah and you're showing a whole lot of blog posts but the buttons have a set width of say 100 pixels yeah all right so not the best example but you get the idea you've got that ellipsis component and honestly it'll probably come in handy in a few other components that you explore as well so that's good to know let's change this to a label and now we're going to explore a line so a line is a pretty straightforward attribute we can align it to the left and the text goes to the left align it to the right and this also works well with icons as well so icon is equal to how about a train and if we say around then everything is going to be equally distributed in the space so save that and so the space here here and here is equally distributed when we say around however if we say between it puts space between these two elements so that they end up on the edge i'll show you what i mean yeah so between put space right in between here so they end up on the edges of the button that can be really useful to know so let's go back to normal here by removing the column class what else we might get rid of a line and we'll get rid of that label there and now we're just back to a really basic icon for our button we have quite a bit of control over the size of our button so we can say for example extra small i haven't used extra small before but i have used small before medium gives us the normal size of our button we've also got of course large and extra large so those are definitely worth knowing we've also got padding as well so we can come down here let's move that back to a medium size button and we can say padding all of those sizes i just showed you also apply to padding as well extra small small medium large extra large etc and so that's going to give us a little bit of a different result so we have a lot of padding in there and a smaller icon and you can mess around with these as well so you could have like a large icon but a smaller amount of padding something like that it's nice to know we have that flexibility with quasar i love it let's make this green just to mix things up a little bit and another cool thing with padding you can actually do the whole thing from scratch so if you've ever used the padding property with css what it does is it starts with the top then right then bottom then left so it goes it goes clockwise so for example let's have a huge padding at the top of 30 pixels and then on the right let's have a small padding of 1 pixel on the bottom let's have like i don't know a massive padding of 100 pixels and then on the left we'll have one of zero pixels and that's just a bit of a silly example there but you get the picture and another thing that we can do and i actually didn't know about this until reading the docs recently is we can use quasar's default sizes for the y-axis and then the x-axis i'll show you what i mean we can say hey set the y-axis padding to large and the x-axis padding too small and then the y-axis is going to be large so at the top and bottom and then small on the left and right so we have all of that flexibility and it's probably better to do it this way because it means that you're doing it the quasar way and you're using their sizes and that's usually a good thing i'm just going to move things back to normal now and let's move on to loading this is really really cool i use loading all of the time if we just say loading there and equal to true then we get this beautiful loading symbol and let's actually simulate this so how about we say at click equals simulate request there we go so we'll set this to a data property that's called loading and now we'll say data return an object loading is equal to false by default save that and we'll come down here create a new method call it simulate request and when this starts we're going to set the loading equal to true this dot loading is equal to true so let's see that works and it does and now the easiest way to simulate a request is to just say set timeout and we'll do three seconds here and then we can just say this dot loading is equal to false so now we're clicking it one two three and it's done how cool is that i could play with this all day and i love that you get this beautiful look at this when it's done you just get this nice fade out and they've you know they've put in that little bit of extra effort to make it look really beautiful i like that but you know what quasar's got a lot of its own spinners so why don't we just go ahead and use one of them maybe we don't want to use the default spinner we can do that by saying for example q dash spinner dash gears that's one of the spinners that quasar gives us out of the box so we can whack that in there let's make itself closing like this and we actually have to throw this in a template so template because this is going to be a slot component for loading so hashtag which is basically the same as saying v dash slot and then the thing that we want it to be a slot for so rather than doing that i can just say hashtag loading and now when i click on it we get the gears for loading how cool is that and there's actually quite a few that quasar gives us out of the box like radio oh you gotta refresh the page when you do slotting stuff sometimes so we got radio and we also have our glass i like this one oh refresh the page yeah the hourglass loader but let's move it back to the normal spinner for now refresh the page and we're back to normal and now you're probably thinking it doesn't get any better than that but it does we can actually set the progress as well i'll show you what i mean we can say percentage is equal to ah what's a good starting point let's say zero percent and you'll notice that it doesn't show anything there in fact i'll set loading to true so that we can play around with this more easily but if i set it to 20 then it's 20 done if i set it to 50 and so on and so forth how cool is that so we can actually set this percentage of how much it is completed and let's actually mock this so we can see what it looks like we'll set that to progress we'll come in here and we'll say progress to zero by default and simulate request when it starts we'll say this.progress is equal to uh let's set it to zero and then we'll say set timeout oop gone a bit crazy with my formatting there and how about uh every one second and we'll make it a total of five seconds probably best if i make this a one one-liner because i'm going to do a bit of copying down and then we can say this dot progress plus equals 20. okay so after one second we're going to add 22 progress and we're going to do that five times one two three four five save that okay refresh the page and i'm going to come in here and move this back to the loading variable that we have and check this out oh i've done something wrong ah so one second and then two then three then four then five let's try this again and there we go two three four five and we get this awesome loading bar so you can imagine how that would come in handy if you're able to get some feedback for example if you're running a job in the background and it sends a request or like pushes a request down to your application that tells you how far along that job is done that could be like super handy to have a loading bar a progress bar there and of course quasar makes it a cinch actually let's leave that there you might want it for reference so coming back up here let's move on to ripples because we have a little bit of control over the ripple which is that let me just move these off so the ripple is that little sort of um that little effect you get when you press the button you notice that there's a little circle thing that kind of emanates from the place that you click and notice if i click on the top right corner it emanates from where my mouse is bottom left you might want to do this on your own computer to really see that that's happening it's a very specific thing however we actually have a little bit of control over that if we say ripple and we set that to an object we can say do it from the center and now when i click on it even if i go from the edge it's going to start in the center so that's really cool to know another thing we can do is change the color of the ripple so let's set that to orange and now it's an orange ripple that probably looks better if you don't have a color there yeah orange ripple let's bring the color back get rid of that color and the last thing we can do is just get rid of the ripple entirely so now clicking on that button doesn't give us the ripple effect sad face so i'm going to get rid of this and bring the ripple back that's ripples another thing that you'll want to do all the time is link to different parts of your app with a button and we can just say two just like you would with view router and then save that and now when we click on this button it'll take us to the home page there we go it works let's take us to the avatar page and it works and another thing we can do and i didn't even know this till recently is at click go to home for example we'll change that to home you can actually hijack the clicking of two i'll show you what i mean sometimes you might want to do this i've never been in a situation where i have but you might think of one we can say go to home take in the event and taken a function called go so basically if we call this it's then going to activate that link so it's actually going to take us to that location if we call go and now what we can do is say event dot navigate and set that equal to false so now when we click on this button it doesn't navigate there which means we have control over the navigation and we can say for example set timeout it's so good for example set timeout we can just say after two seconds then call go which is then going to take us to the link so one two and there we are i've never used this myself i only just found out it was a thing but it's cool to know that we can do that if we like come back up here remove that what else can we do ah this is good to know now if i open up the console here and we inspect this let's scroll up a little bit yeah notice that the type is equal to button in this scenario we can actually change that so maybe for example you want this button to work like a button inside of a form so sometimes you have a button in a form you click on that button and it submits the form and maybe you want to do that in a native way so let me give you an example here if i throw this button inside of this form you would expect that when i press that button because it's inside a form that would that it would submit to the page oh let's remove the two part here or let's just imagine a scenario where you wanted to then submit to the page and usually you would say type is equal to submit to do that well that works with cue button so if i save this click on the button it's now submitting the page so that isn't like the most complete example but you get the idea you can use this button in a native form if you would like to and maybe you want your button to act like a normal link so you don't want to use it like view router you can set the type to a and then we can say href instead of saying 2 and i don't know google.com save it and it'll take you to google oh actually that's thrown it on to um the end of my current server because i didn't add the https and then that'll take me to google.com there we go pretty cool and then maybe you want to open this in a different tab in fact let's not use google here let's use quasar.dev and now what i can do is say target is equal to underscore blank so when i click on this link open it inside of a blank tab so now let's get rid of the console we probably don't need that for now there we go it opens it in a blank tab so that can be useful if you want people to keep the app open and this is just an external link like some extra information outside of your website that you might want them to look at and then of course if i remove that it'll take me straight to quasar within the same tab really good to know pressing on there are situations where you might want a fab button which is short for floating action button and to do that we can just type in the word fab or let me just bring this icon back and let's change the color to keep things interesting yeah if i use the word fab here for floating action button then it automatically does all of the styling for a traditional floating action button as google would define it in its material design spec and now we can change this icon to something like add because often you'll have like a little button down here for adding things and in fact let me show you a complete example here q dash sticky is a really awesome component that we have and that's basically going to allow us to stick things within a cue page i'll show you what i mean let's set the position equal to bottom right and i'll throw the button in there and then it just goes straight down there and we can also say for example offset and give that an array and maybe set it to 16 by 16 and it just sort of pushes it out a little bit and gives it an offset and you'll often see this this is really handy when you have a mobile app and you're constantly adding things it's nice to have that add button right near the user's thumb and so we can do that easily using cue page sticky and a floating action button moving on oh before i move on if we add dash mini we get a mini floating action button that's good to know so let me just get rid of the the sticky part bring us back to where we were before get rid of that and now we're back to a normal button now sometimes we end up in situations where we need to squeeze buttons so they fit in tiny places in my experience this is especially true for tables that have buttons in them so often i have tables and like there's a button at the right side of the table and i don't want the whole table to be really big like to have the size of this button i want the whole table to be dense and i can easily do that by adding the dense attribute to our button and that just makes everything a little bit denser so that's really good to know you can also get a similar achievement with padding however dense is a kind of a more standardized way of making your button dense now cube button isn't a wrapper for router link so this is not sitting inside of a router link component behind the scenes and the reason i say that is because you might think that it does because it's got the to attribute for example and what that means is that it can't do everything that router link can do unless we wrap it in router link ourselves alright so this is probably an unusual thing like you wouldn't do it very often but it's good to know that it's possible so let's go ahead and wrap this inside of router link and we can say v dash slot is equal to props and now we can take these props and use them within our button so basically we have the power of router link inside of our button i'll show you what i mean we'll say v dash bind and we'll use a function called button props so we're going to get some button props and we'll pass that the router link props i'm going to set the label of this to home label is equal to home save that and we're going to have to go ahead and create this method as well voila now one of the things that we can pull out of router link is is exact active and that's going to tell us if the route that we're currently on is equal to the two property of the link i'll give you an example so let's say 2 is equal to slash so our home route if we are on the home route then is exact active will be true because we are exactly on that route we can also say is active to test whether or not we are within that route but in this example we'll say is exact active now what i'm going to do is return an object and this is going to hold the attributes of our button so let's set the color equal to is exact active that'll be a ternary operator and so if that is true if we are on the current route for this button will make it red otherwise undefined which will basically just set it back to normal let's see if i can spill undefined alright so save that scrolling up let's get rid of the color property there because we're now doing that ourself using v bind save it and now notice that it is not red however if we set 2 to the button route then it will be red and if you don't understand this that's totally fine this is more view router stuff and so if you want to learn about view router that's a different concept it's something that we're not going to cover in depth in this video i just wanted to give this example for those of you that do understand view router moving on let's bring things back to normal i'm just going to bust out a few other things that we can do with the button now so you'll often want a tool tip let's say here q dash button to close that off and inside it will say q tool tip whoop didn't finish writing that word there we go my tool tip oh let's do something funny don't press the red button bit of a uh men in black reference there whoops color is equal to red save that don't press the red button so that's pretty cool get rid of that and i'll show you another example we can set it to disabled and this is particularly useful oh that's disabled without a d this is particularly useful if you're doing a request so you probably do not want the button to be clicked again whilst there is a request happening i've actually had this situation where i wasn't forward thinking enough to add disable and so clients would be like whacking that button over and over again because they had slow internet and then you end up with a bunch of requests and it's like so what we can do is just disable that and i'll give you an example here handle clicked and we'll add that method in here and we'll just do a console.log saying clicked open up the console and now when i click on that notice that it doesn't console.log anything however if i remove disabled i can now click on the button which is really cool quasar's handled disabling the button and adding a little bit of extra styling there so notice that it goes a little bit uh it goes a little bit lighter save it yeah a little bit more transparent to show you that it is disabled that's really handy especially for requests we also have a property called no wrap and i'll show you what that does let's say the label is quite long so take me home please i've had enough of this site let's set a width for that to 100 pixels and there we go it's going to make the button really really high and perhaps for some reason you want to have no wrap on that button this probably isn't the best example but it's good to know that we have that option available to us and if you can think of a better example for using no rap then let me know in the in the comments if comments are available yet i haven't actually built it out for the site but it'll be coming soon let's go back to something a little bit more normal now i had a bit of difficulty showing you an example for this next thing and that is the stretch property and what this means is you can tell this button to stretch and fill up all the space inside of a flexbox parent i'll give you an example let's add a div in here and we'll throw the button in there and this div is going to have a class that is equal to row we'll say items dash start and you know what let's give it a height as well so the height will be equal to 100 pixels there we go and notice that that has stretched now just fill in all the space however if i remove that it's going to move back to normal and a situation you might use this maybe you've got like a bunch of buttons or other things in here and you only want the button to stretch to fill the space this is another one of those things where if you can think of a better example for this than let me know because this example isn't great but you get the idea of what it does now moving back to what we had before just a plain old button and that's it for this video but one more thing i'm going to show you is a pattern that i often use with buttons just so you can kind of see in action in a more real world example i will often have a logout button so let's set the icon here equal to log out there we go luckily we have that icon and we can say round and i'm going to make this flat and i'll throw this button up into the top right here so let's copy that and we'll jump into our main layout and let's come up here a little bit where's our bar so here's our toolbar we can throw it after the title and there we go it shows up there this is a pattern that i often use for a button for just logging out of the application and while we're at it let's change it from quasi app to quasar components a little bit more indicative of what this application is so there we go that is the q button component and i'm pretty sure i showed you everything that you can do with its api in this video hope you enjoyed it it was a long one but i'll see you in the next video where we'll explore a little bit of other button stuff because there's actually some cool button stuff that you can do when you add it to different contexts so we can group buttons really nicely and have like button drop downs and stuff like that and then we'll move on to something else but it'll be fun and really useful so i hope you enjoy it see you in the next video

Channel: Luke Diebold

Views: 735

Keywords:

Id: w4OkZnFbnU4

Length: 32min 48sec (1968 seconds)

Published: Mon Oct 19 2020