1 00:00:00,150 --> 00:00:04,260 In this lecture, we are going to update the appearance of our taps. 2 00:00:04,530 --> 00:00:07,740 Currently, it's not clear which tab is active. 3 00:00:08,100 --> 00:00:11,400 Users may not be sure if they're reviewing the correct tap. 4 00:00:11,760 --> 00:00:17,670 Visually changing the appearance of the Active tab will help the user understand the content they're 5 00:00:17,670 --> 00:00:18,120 viewing. 6 00:00:18,450 --> 00:00:20,220 It's going to be super simple. 7 00:00:20,490 --> 00:00:23,730 We will start by toggling the links above the tabs. 8 00:00:24,030 --> 00:00:26,970 Open the tabs container component template. 9 00:00:29,550 --> 00:00:33,300 We are going to apply a set of classes to the anchor element. 10 00:00:33,570 --> 00:00:35,550 These classes should be dynamic. 11 00:00:35,850 --> 00:00:39,570 Therefore, we will bind the energy class directive. 12 00:00:42,030 --> 00:00:44,790 The value for this directive will be an object. 13 00:00:47,220 --> 00:00:49,500 We all have two sets of classes. 14 00:00:49,830 --> 00:00:54,150 The first set of classes will be applied if the tab is not active. 15 00:00:54,540 --> 00:01:01,050 The name of the classes are the following hover colon text indigo 400. 16 00:01:03,600 --> 00:01:07,380 In an earlier lecture, we talked about tailwind variants. 17 00:01:07,650 --> 00:01:11,820 Variants are classes that apply a property based on an action. 18 00:01:12,180 --> 00:01:20,250 The text Indigo 400 Class will change the color of an element to Indigo one if we don't want to apply 19 00:01:20,250 --> 00:01:22,440 a CIUSSS property immediately. 20 00:01:22,800 --> 00:01:27,780 For example, we may want to apply a text color during a hover event. 21 00:01:28,260 --> 00:01:29,700 We can use a variant. 22 00:01:29,970 --> 00:01:33,180 Variants are prefixed to a tailwind class. 23 00:01:33,420 --> 00:01:37,470 In this example, we are applying the text color on hovers. 24 00:01:37,800 --> 00:01:40,920 A colon separates the variants and class name. 25 00:01:41,340 --> 00:01:44,310 There are other variants available in tailwind. 26 00:01:44,670 --> 00:01:50,220 The most common type of variant is the hover variant, which applies a property on HOVERS. 27 00:01:50,550 --> 00:01:53,940 Variants can be applied to most tailwind classes. 28 00:01:54,510 --> 00:01:57,570 This class should be added conditionally to the link. 29 00:01:57,960 --> 00:02:02,460 The condition should check if the Tab Active property is false. 30 00:02:05,070 --> 00:02:13,110 The next set of classes will be the following hover call and text white text white B.G. Indigo four 31 00:02:13,110 --> 00:02:13,560 hundred. 32 00:02:15,940 --> 00:02:21,460 These classes should be added to the element if the Tab Active property is true. 33 00:02:24,140 --> 00:02:26,750 Admittedly, this syntax looks ugly. 34 00:02:27,110 --> 00:02:31,970 It would be a good idea to create a function for generating the appropriate classes. 35 00:02:32,270 --> 00:02:34,760 I'll leave this as an exercise for you. 36 00:02:35,030 --> 00:02:37,730 Let's move on to hiding the tabs content. 37 00:02:38,060 --> 00:02:40,850 Open the Tab Component Template file. 38 00:02:43,350 --> 00:02:47,670 We are going to wrap the energy content element with a div tag. 39 00:02:50,180 --> 00:02:52,970 Tailwind has a class for hiding elements. 40 00:02:53,150 --> 00:02:54,890 It's called the hidden class. 41 00:02:55,160 --> 00:02:59,810 We will dynamically bind this class to the div element, if you would like. 42 00:03:00,020 --> 00:03:04,490 You can try using the Energy Class Directive to toggle this class. 43 00:03:04,820 --> 00:03:09,800 However, I want to take this opportunity to show you an alternative syntax. 44 00:03:10,130 --> 00:03:14,360 This syntax can be useful if you're trying to toggle a single class. 45 00:03:14,750 --> 00:03:18,350 The new class directive can make our code look cluttered. 46 00:03:18,980 --> 00:03:23,330 Let's explore this alternative syntax on the div element. 47 00:03:23,390 --> 00:03:26,870 We are going to bind a property called Class Dot Hidden. 48 00:03:29,500 --> 00:03:36,490 Angular will understand we are trying to bind the class attribute to the hidden class, the value must 49 00:03:36,490 --> 00:03:39,910 be an expression that evaluates to a Boolean value. 50 00:03:40,240 --> 00:03:43,390 We will check if the active property is false. 51 00:03:45,910 --> 00:03:51,910 If it is, this class should be applied to the element, we are effectively hiding the element. 52 00:03:52,090 --> 00:03:53,800 Let's check out our model. 53 00:03:56,300 --> 00:03:59,420 By default, the log in tab is selected. 54 00:03:59,780 --> 00:04:02,360 We won't see the registration form anymore. 55 00:04:02,660 --> 00:04:07,820 If we click on the Register tab, the log in form disappears in its place. 56 00:04:08,000 --> 00:04:10,760 The registration form appears perfect. 57 00:04:10,910 --> 00:04:12,620 We've got a functioning tab. 58 00:04:12,980 --> 00:04:16,899 In the next lecture, we are going to make one final adjustment.