alright then so this is looking pretty
swanky now there's one more thing I want
to do for each one of these rows and
that's just to style the status a little
bit because it's the minute it's a bit
boring so I'd like to color coordinate
this and place these in some kind of
little bubbles or as they're known in
beautify chips so before we do that let
me just go to the chips page on the
documentation let's type in chip and go
there and you're gonna see a lot of
different use cases for this we can have
chips which look like tags that we can
cross off or you can have chips which
look like this with a little avatar on
the left or just an initial the one
we're going to be doing is at the
simplest one which is this thing right
here all we want is a little bubble that
surrounds our status over here and then
we can color coordinate that bubble
dependent on the status to match the
color over here okay
so then let us go through the code now
this is where we want the chip right
here to begin with I'm gonna get rid of
the headed because we don't need a
status headed instead we're just gonna
have a bubble over there which is going
to take up a little bit more route so
let's get rid of that and in fact I'm
gonna get rid of this as well and we'll
start afresh
inside this flex item so first of all
I'll create a div to surround this and
I'll explain why I'm doing that in a
minute but first of all let's create
this chip now to do that we use a
component called V - chip simple to
remember right now this chip is going to
be small so we're gonna add in the small
keyword in fact I'll leave that off and
I'll show you the difference between the
two sizes later on okay so inside this
chip what do we want to do well we want
to output the project status so again
double kill the brace is project status
and that will do so save that and let's
just view this in its raw format over
here so that's looking alright so now if
I add small to this let's see does this
make a difference small and it does it
just cuts it down a little bit and I
think that looks a little neater so
we'll do that first of all now I want to
give this some classes and like a bull I
want these classes to be dynamic because
I'd like to output the status as one of
these classes
so that we can collect 1/8 them down in
the CSS so what I'm gonna do is use data
binding on the class so colon then class
it's gonna be equal to a template string
again so that's the backticks
just below the Escape key on most
keyboards now then first of all I'm
going to output the variable so dollar
sign and then project dot title or not
title rather status so that would be
ongoing or complete or overdue then I
want this to have white text so white
double dash text and then we'll make the
font size of this to be caption
so quite small and then we're going to
give this margin in the y-direction
up-and-down of a strength of two all
right so let's save that now and view it
in a browser so that's looking all right
obviously it has those classes if we
inspect these we're going to see those
classes but it's not doing anything at
the minute because we've not
color-coordinated them but if we have a
little look we can see that this one
right here has a class of ongoing and if
we look at a different one inside this
let's look at the bottom and go inside
the div this one has a class of complete
so we can now use these to style them in
terms of the color of them so let's do
that so I'm going to go down to my CSS
where we did the previous ones and what
I'm gonna do is I'm just gonna copy this
from my github repo because I'm sure you
don't want to see me turn pal CSS rules
but what I'm doing is saying okay get
anything with a v-chip class and by the
way chips in beautify have this V - chip
class you can see this right here see
what it says V - chip so we're grabbing
anything with that class and also
pairing it with complete ongoing and
overdue and we're making the background
of those these three colors similar to
were both so let's save that and see if
this works and while looking pretty good
so that's alright that's looking nice
definitely a lot nicer than what it was
before but I think what I'd like to do
is position all of these so the flush to
the right rather than the left of
whether you so
to do that we're going to go right back
up and give this div over here a class
equal to a right and what that is going
to do is align the contents of this div
which is the chip over to the right so
if I save that now and preview this that
is looking better all right so there we
go we have our chips now and this over
here is pretty much complete now if you
want to learn more about chips again
just type in chip over here and there's
loads of different use cases so you can
scroll down those see all the props and
the different ways we can use them
there's code examples for each different
one