1 00:00:00,590 --> 00:00:01,670 Everyone, welcome back. 2 00:00:01,850 --> 00:00:07,610 So we talked about creating a more complex component in our last video, and I'm going to tell you about 3 00:00:07,610 --> 00:00:13,940 how you can actually take these instances and override them for your own use overrides, allow you kind 4 00:00:13,940 --> 00:00:20,360 of to tweak and adapt these instances depending on the context of your designs, so you can change things 5 00:00:20,360 --> 00:00:25,310 like title text, stroke other properties while staying connected to the master component. 6 00:00:26,240 --> 00:00:33,530 So one thing you saw me do was you saw me actually create this label, but hide different things like 7 00:00:33,530 --> 00:00:36,590 icons and descriptions and all that kind of stuff. 8 00:00:37,280 --> 00:00:42,740 Now, in this instance where we're going to do we're going to actually create an instance of this component. 9 00:00:43,950 --> 00:00:45,780 And if I go in here. 10 00:00:46,880 --> 00:00:51,260 I can do something like what should we use here as a label? 11 00:00:51,470 --> 00:00:59,990 I think something like maybe a date that's totally fine, as you can tell, like we're overriding these 12 00:00:59,990 --> 00:01:02,090 properties just so we can use them. 13 00:01:02,220 --> 00:01:04,080 And it makes it really easy. 14 00:01:04,970 --> 00:01:13,040 So now that's an optional and we can even update the text here so we can actually hide this if we want. 15 00:01:13,370 --> 00:01:16,610 But if we do want to use a placeholder, I know we talked about placeholders. 16 00:01:16,610 --> 00:01:20,750 People can still use them if they're kind of adhering to the basic rules. 17 00:01:21,020 --> 00:01:24,140 So we can just kind of what else can we put here? 18 00:01:24,350 --> 00:01:29,870 If we want to have a placeholder, we can actually adjust that or you can actually just create another 19 00:01:29,870 --> 00:01:30,480 component. 20 00:01:31,040 --> 00:01:31,860 So select it. 21 00:01:32,750 --> 00:01:36,650 So, I mean, you can definitely create different instances of this. 22 00:01:37,310 --> 00:01:42,440 If you wanted to give, like an icon or something like that, you can do that, too. 23 00:01:43,340 --> 00:01:50,600 An example is if we go back to our original master component and go back to our assets, we can actually, 24 00:01:50,600 --> 00:01:52,220 like, throw an icon in here. 25 00:01:53,780 --> 00:02:00,050 Some people like using icons within their inputs, and we did go over that as well, and we can throw 26 00:02:00,050 --> 00:02:03,710 that in there and what we're going to do is hide it. 27 00:02:05,950 --> 00:02:09,210 And that should be reflected here, I should be able to grab it. 28 00:02:10,930 --> 00:02:19,210 Go to our input field and there we go, we can even add, like show and hide icons if we wanted to, 29 00:02:19,210 --> 00:02:22,150 we can even grab different instances of the icon. 30 00:02:22,750 --> 00:02:24,540 So we have the input text there. 31 00:02:25,950 --> 00:02:27,780 Where's the the icon? 32 00:02:30,070 --> 00:02:33,790 Over here, so you can grab an instance over here. 33 00:02:35,740 --> 00:02:40,330 So you can use like, what else should we use, like we can use like. 34 00:02:41,570 --> 00:02:43,430 A different icon, if we want. 35 00:02:43,730 --> 00:02:45,260 I don't know if you want to use a warning sign, but. 36 00:02:46,640 --> 00:02:51,920 Like, we can do a bunch of different things just by editing that instance, so you don't necessarily 37 00:02:51,920 --> 00:02:57,230 need to create a component for every single use case, you can just have a general component that has 38 00:02:57,230 --> 00:03:02,900 hidden layers, possibly like I've done here and have other components in the background like I have 39 00:03:02,900 --> 00:03:03,830 on another page. 40 00:03:03,830 --> 00:03:08,780 I have a bunch of iconic components and you can grab those and use them. 41 00:03:09,590 --> 00:03:14,950 So like I've done here, as I've essentially just grabbed that check from another component. 42 00:03:14,960 --> 00:03:15,590 So I've checked. 43 00:03:15,650 --> 00:03:19,220 I have the instance I can just like select date range. 44 00:03:20,070 --> 00:03:21,750 I can hide this if I want. 45 00:03:23,110 --> 00:03:23,770 And there you go. 46 00:03:23,980 --> 00:03:27,100 That's such an easy way to override instances.