Besides its huge collection of components, Budify also provides a few directives that we can add to components or elements in order to provide special functionality. If you go under the directives tab here in the Budify docs, you can find what all is available. There is a click outside directive that allows you to detect when a user clicks outside of an element. There is the intersection observer directive.
This allows you to observe a particular element and see when it has entered into the viewport. Notice here we are observing this card, and when it enters the viewport, the light here, the circle, turns green. When it exits, it turns red again. There is also a Mutation Observer Directive, which is a simple interface over the browser-native Mutation Observer API that allows us to listen for changes on any elements, things like modifying their attributes, modifying their children, so on and so forth.
Honestly, I probably wouldn't use this a whole lot. I would probably default to using View's Watch instead. It's not exactly the same, but I would get more use out of Watch. Now, there's also a resize observer here that allows you to detect whenever the window resizes and then run a callback function on that event.
There is a ripple directive that allows you to add a ripple to any random HTML element. A scroll directive here that fires whenever you scroll the page, or depending on what element is used, the element that you're scrolling. And lastly, there is a touch directive that allows you to capture swipe gestures and apply directional callbacks. I'm on a desktop, so we won't really be able to demo that one.
Now let's take a look at a few of these directives and how we might end up using them in our project. So the first one I want to take a look at is the click outside directive. I have already written the code for all these directives. Let's see what I've done.
So here on line 67, I use the v click outside directive on the data table. Then I pass it a callback function called handle click outside. Okay, when I go up to the definition of that, All I'm doing when I click outside the table is set the selected value back to an empty array. The effect of this is that we can choose any elements within the table here and then click outside the table in order to clear our selection.
Cool, pretty straightforward. If I select some items again and then click anywhere within the table, they are not cleared. Okay, what about the the ripple directive? Right now we can click on our post title in order to bring up the modal where we edit the post.
Notice that when I click on it now, it does have this ripple effect. Cool. Even though it's just a normal HTML button. The reason it has the ripple effect is because I have added the v-ripple directive onto that button.
Pretty straightforward. I also gave it a little padding on all sides just to make the ripple a little bit larger. The last directive that I want to demo is the resize directive. So this listens for resizes on the window.
I have added it to the data table here, as that is the element that I want to make changes to whenever the window resizes. But honestly, you could add the directive to any element at all. It really doesn't matter. It's listening to the window resize and not the resize of a particular element.
Okay? But you'll see in just a moment what I want to do is when we make a shorter browser, I want the density on the table to get smaller and smaller. You can see that as I drag my browser up. Cool.
It got a little smaller there, got a little bit more dense. And as I continue scrolling, it got still a little bit more dense at smaller heights. So that is the only reason I put it on this table is because that is what is being affected by the resize. Not that it actually matters that the resize isn't doing anything special with the table.
I'm doing that manually inside the function. Okay, great. Let's see what the function looks like now. The first thing I do is set a default density.
This is the density that should apply at any size greater than 800 pixels. Then I check the height of the window. If it's less than 800, we set the density down to comfortable, which is just a little bit more compact. And then if it gets even smaller, less than 600 pixels, we set the density to compact, which is the smallest available density.
Now, you'll notice if you're using TypeScript, I have typed those options right here. The way I got these available options is by simply going to the V table here and then supplying the density field. If I remove this real quick and just type in density, press control space bar, you'll see, yeah, those are the options that beautify provides. So I just created a custom little type for that.
Now what I'm doing is I'm defining a piece of reactive state called table density, passing it in as the density for the table component. And yeah, you can see the default is default here. However, on the resize, we're setting the table densities value to whatever new density is chosen based on that logic you just saw. And that's how the resize works.
It's pretty straightforward and maybe not the most effective strategy, but I think it actually looks pretty good. More importantly, it demos the resize directive perfectly. In conclusion, I encourage you to play around with the other directives in the docs and see what kind of interesting use cases you can come up with for them.