This video we're gonna make a custom button with an image.
It's gonna be called Cool button.
It's gonna be pretty responsive pretty easy to work with.
And this is going to be another end to end video.
So the B zero edits.
All right first things first we're going to paste in our images just simply an up and down arrow.
And let's actually kill that.
Let's go in here first thing we want to do in the code is go in to cute and we want a Kumail file let's
call this cool button.
Probably help if we spell cool correctly.
There we go.
And in here.
Let's start fleshing out some properties.
So I'm going gonna give us an idea of root
and let's call this color border
and copy and paste time
so we got our border color our normal color are pressed obviously is when we're going to press down
on this thing
and our hover color.
We also want a string because we have an image that we're going to be able to update here.
Let's call the source
and this is the actual image source that we're going to pull out of our resource so let's go ahead and
let's add in some resources here.
Open an editor and I want to add some files
does it really matter where we put them but you know I'm not really happy with that someone I remove
that remove that's going to add a prefix
then I'm gonna ataman.
There we go.
Just kind of keep those separated I should say files images up down.
We're good to go.
Now I want a custom signal I want to be able to say hey we click this button.
So signal clicked.
Very simple to do that.
And let's go ahead actually build our component out for say rectangle
it's going to give it an idea
go and give us a radius.
That's going to match the width.
So it's a perfect circle color.
I want this to be the root color.
Normal
border.
We could have done an alias but really didn't feel like it to.
And border color is going to be our route dot color border.
And what I meant by alias is we could have done a property alias up here saying hey point just to the
rectangle and then we could extend the rectangle border.
But I really wanted some control over that because Phil parents now of course we need a mouse area
call that area and let's go it acres Phil
going to be the parent Plover and Abel is going to be sure because we want to actually hook into the
hover swing get that color hover and get too far I'm going to add that image I say image
in our acre
we're going to fill the parent as well trying to keep this pretty simple but also pretty flexible
and let's go with Phil mode because we want to be able to stretch that image out so much say image and
we can do a preserve
aspect fit that way it scales appropriately.
Source I want this property appear something to say loot that source and then we just need our mouse
area.
So we're going to say fine pressed
on released
let's do on entered on exit
now we have our mouse interaction so oppressed is kind of where the magic happens here.
We're gonna say body and we want to go body color thought I heard thunder there for a minute early in
the year for thunder.
That was a little weird.
Color pressed root.
And we want to go.
Clicked.
This is a signal now.
Tell us senses helping us out but we can just simply grab this and we're gonna get that signal.
Very very simple to do that.
Copy and paste is going to help us out immensely here
and on release is going to be the color hover because we're still actually hovering the mouse over on
entered.
We want to do color however as well
and exit.
Let's go with color normal.
All right cool button exists in all of its beauty.
Let's go ahead and jump into our main here and we want a column.
Actually let's flip over the design view.
We've got our cool button here.
Let's go ahead and go.
Imports quick controls.
I want a column
and let's just scale this appropriately here
put in a specific layout.
Go back.
Want our cool button someone to just drag and drop two of those.
I'm going to go there and there is cool button call button 1.
Now we do not have any with their height here so we need to actually flesh that out.
Some say one hundred by one hundred
and one hundred by one hundred.
There we go.
We could have set that in the actual component itself but I wanted the user to manually set that and
a set column.
Let's give this a spacing of 25
and let's go ahead and jump into right here.
Copy that you URL.
Cool button.
Now our source here.
Let's just go and paste that in.
See if that takes and paste that in there.
So I went down and this one is going to be up
save and let's run and see what this looks like.
There's our buttons.
Let's go ahead and hook into the on clicked.
So I'm going to say clicked and I just want to go console that log up clicked and we can console logged
down clicked
say run let's test that out.
We're gonna bring up our app output here and I'm actually clear it so you can see it up click down clicked.
Very cool.