In this lecture, we are going to update the appearance of our taps.
Currently, it's not clear which tab is active.
Users may not be sure if they're reviewing the correct tap.
Visually changing the appearance of the Active tab will help the user understand the content they're
viewing.
It's going to be super simple.
We will start by toggling the links above the tabs.
Open the tabs container component template.
We are going to apply a set of classes to the anchor element.
These classes should be dynamic.
Therefore, we will bind the energy class directive.
The value for this directive will be an object.
We all have two sets of classes.
The first set of classes will be applied if the tab is not active.
The name of the classes are the following hover colon text indigo 400.
In an earlier lecture, we talked about tailwind variants.
Variants are classes that apply a property based on an action.
The text Indigo 400 Class will change the color of an element to Indigo one if we don't want to apply
a CIUSSS property immediately.
For example, we may want to apply a text color during a hover event.
We can use a variant.
Variants are prefixed to a tailwind class.
In this example, we are applying the text color on hovers.
A colon separates the variants and class name.
There are other variants available in tailwind.
The most common type of variant is the hover variant, which applies a property on HOVERS.
Variants can be applied to most tailwind classes.
This class should be added conditionally to the link.
The condition should check if the Tab Active property is false.
The next set of classes will be the following hover call and text white text white B.G. Indigo four
hundred.
These classes should be added to the element if the Tab Active property is true.
Admittedly, this syntax looks ugly.
It would be a good idea to create a function for generating the appropriate classes.
I'll leave this as an exercise for you.
Let's move on to hiding the tabs content.
Open the Tab Component Template file.
We are going to wrap the energy content element with a div tag.
Tailwind has a class for hiding elements.
It's called the hidden class.
We will dynamically bind this class to the div element, if you would like.
You can try using the Energy Class Directive to toggle this class.
However, I want to take this opportunity to show you an alternative syntax.
This syntax can be useful if you're trying to toggle a single class.
The new class directive can make our code look cluttered.
Let's explore this alternative syntax on the div element.
We are going to bind a property called Class Dot Hidden.
Angular will understand we are trying to bind the class attribute to the hidden class, the value must
be an expression that evaluates to a Boolean value.
We will check if the active property is false.
If it is, this class should be applied to the element, we are effectively hiding the element.
Let's check out our model.
By default, the log in tab is selected.
We won't see the registration form anymore.
If we click on the Register tab, the log in form disappears in its place.
The registration form appears perfect.
We've got a functioning tab.
In the next lecture, we are going to make one final adjustment.