1 00:00:00,480 --> 00:00:01,140 Hey, everyone. 2 00:00:01,480 --> 00:00:02,010 Welcome back. 3 00:00:02,220 --> 00:00:09,360 So we're going to be talking about building input's with atomic elements, so I hate to call this inception 4 00:00:09,660 --> 00:00:12,830 because sometimes components can get pretty complex. 5 00:00:13,170 --> 00:00:15,210 Now, if you notice, we just have a field here. 6 00:00:15,930 --> 00:00:22,890 And, you know, essentially this field isn't going to be the only part of the component that you use 7 00:00:22,890 --> 00:00:24,770 to actually create an input field. 8 00:00:26,130 --> 00:00:27,930 You're going to have other components as well. 9 00:00:29,380 --> 00:00:37,480 So one of those components could be something like a label, and we can create our own little label 10 00:00:37,480 --> 00:00:40,390 component and I'll show you how that works. 11 00:00:40,930 --> 00:00:44,020 So what I've done here is I have some texts. 12 00:00:44,620 --> 00:00:48,580 I think that's fine in terms of the typeface choice. 13 00:00:50,460 --> 00:00:52,190 You can probably give it. 14 00:00:52,590 --> 00:00:53,700 I think that's cool. 15 00:00:53,800 --> 00:00:54,200 OK. 16 00:00:55,390 --> 00:00:56,440 So this is our label. 17 00:00:59,760 --> 00:01:02,640 And we are just going to. 18 00:01:03,700 --> 00:01:09,700 Do that, we're going to duplicate it here, and you may have noticed that this is pretty similar to 19 00:01:09,700 --> 00:01:14,470 the type of inputs that we use in our demonstrations earlier on, like forms, inputs and buttons and 20 00:01:14,470 --> 00:01:15,190 stuff like that. 21 00:01:15,640 --> 00:01:17,610 And I'm going to show you just how I did that. 22 00:01:17,920 --> 00:01:19,930 So this could be like a description. 23 00:01:21,580 --> 00:01:22,900 We're going to write a line that. 24 00:01:24,790 --> 00:01:31,840 So what we're doing here is we're making a component just for labeling, drop that down to 50 came and 25 00:01:31,840 --> 00:01:33,430 go probably down to 25 percent. 26 00:01:33,460 --> 00:01:38,260 Uh, actually, let's just jump up to 50 and we're going to make that regular. 27 00:01:40,400 --> 00:01:42,410 So this is our other component. 28 00:01:44,720 --> 00:01:46,190 I switch that. 29 00:01:47,580 --> 00:01:55,740 OK, I'm not going to allow my label to go further than this, and I'm not going to allow my description 30 00:01:55,740 --> 00:01:57,460 to go further than that. 31 00:01:58,380 --> 00:02:00,500 OK, so we've set some constraints in there. 32 00:02:01,020 --> 00:02:08,490 We can also do is go into our assets and select an icon that we want to use. 33 00:02:15,550 --> 00:02:18,580 And now the great thing is like we can show and hide these things. 34 00:02:22,820 --> 00:02:26,000 So we have a description Eikon. 35 00:02:27,880 --> 00:02:35,860 Info icon, so it's an instance of another an icon component, and if we just option comen, we've created 36 00:02:35,860 --> 00:02:38,710 a frame and we can call this label. 37 00:02:39,250 --> 00:02:42,940 And what I like to do is I like to just kind of hide these images, so. 38 00:02:44,750 --> 00:02:49,220 There we go, perfect, and we can create a component. 39 00:02:50,590 --> 00:02:52,070 And know we have a labor component. 40 00:02:52,180 --> 00:02:58,040 Let's talk about how we can use this in conjunction with this input, sometimes we find ourselves with 41 00:02:58,040 --> 00:02:59,680 the component that is pretty complex. 42 00:02:59,980 --> 00:03:02,230 You know, it may not be really, really complex. 43 00:03:02,240 --> 00:03:07,210 I mean, some do get that complex, but they may feature something like labels like you've seen here, 44 00:03:07,210 --> 00:03:11,060 different types of text elements, different icons. 45 00:03:11,380 --> 00:03:13,350 So what's the solution, you may ask? 46 00:03:13,780 --> 00:03:15,540 We can build components within components. 47 00:03:15,550 --> 00:03:17,170 So that's why I mentioned Inception. 48 00:03:17,740 --> 00:03:22,920 You can create a component for that field element or label and place it within your input component 49 00:03:22,930 --> 00:03:25,620 so we can put these together to create an input component. 50 00:03:26,380 --> 00:03:31,420 And every time you update that like individual element, this one or this one, it's going to change 51 00:03:31,420 --> 00:03:32,470 across the board. 52 00:03:32,630 --> 00:03:40,480 Sometimes you may do this depending on the context, like changing just like border radius or just label 53 00:03:40,480 --> 00:03:41,380 fill colors. 54 00:03:41,800 --> 00:03:45,580 But it's just so easy using these kind of I call them atomic elements. 55 00:03:45,580 --> 00:03:49,280 It's just a game changer when it comes to building, customizing and maintaining components. 56 00:03:49,540 --> 00:03:51,070 So let me show you what we can do here. 57 00:03:51,520 --> 00:03:55,410 So I'm going to do is I'm actually going to create a just a text component. 58 00:03:55,430 --> 00:03:57,250 I just called it input text. 59 00:03:58,720 --> 00:04:01,960 And this will be the main copy that goes within our input. 60 00:04:03,920 --> 00:04:05,240 We're just leaving this black. 61 00:04:06,190 --> 00:04:08,710 I think that's good. 62 00:04:08,740 --> 00:04:13,060 I mean, we can even bump it up in size a little bit and we're just getting to that. 63 00:04:15,010 --> 00:04:16,360 OK, so that's fine. 64 00:04:16,510 --> 00:04:17,720 So these are. 65 00:04:18,860 --> 00:04:23,190 Master components, what I'm going to do here is I'm just going to create this as a component. 66 00:04:23,780 --> 00:04:24,380 So there we go. 67 00:04:25,040 --> 00:04:29,780 When we're going to do is I'm going to take all these duplicate them as instances. 68 00:04:31,590 --> 00:04:33,330 Now, I'm going to place this. 69 00:04:34,870 --> 00:04:43,150 Just above the input, I'm going to place the input just to the inside of that, so if we are using 70 00:04:43,360 --> 00:04:44,800 our base unit. 71 00:04:46,020 --> 00:04:54,180 We should be spacing with our base unit, so this will be let's just check if our preferences are proper. 72 00:04:55,730 --> 00:05:03,600 So we have a engagement, so for good, so I'm just going to shift option and OK, and there it is, 73 00:05:03,620 --> 00:05:08,660 eight pixels from the edge over here, I'm just going to do the same. 74 00:05:10,190 --> 00:05:10,910 I think that's fine. 75 00:05:10,940 --> 00:05:14,300 So now we have our whole component. 76 00:05:16,450 --> 00:05:20,590 And what we can do is we can also. 77 00:05:27,070 --> 00:05:27,850 And you can tell. 78 00:05:29,590 --> 00:05:32,530 That stretches just beyond their. 79 00:05:33,870 --> 00:05:39,950 If you hold down shift control and the arrow key, you can shrink it by your judgment. 80 00:05:40,110 --> 00:05:48,060 So I've shrunk it, as you can tell from where it was before, aligned over here to eight pixels within. 81 00:05:48,840 --> 00:05:54,480 So now I'm going to select all of these and I'm going to create a component that automatically gives 82 00:05:54,480 --> 00:05:55,240 it a component name. 83 00:05:55,260 --> 00:05:56,130 And I'm going to call this. 84 00:05:57,650 --> 00:05:58,910 Form a field. 85 00:05:59,840 --> 00:06:00,210 OK. 86 00:06:00,680 --> 00:06:06,260 These are atomic elements and this is our kind of our larger, more complex component and what we're 87 00:06:06,260 --> 00:06:09,680 going to do is we're going to change the border is to one hundred. 88 00:06:10,800 --> 00:06:14,570 And as you can tell, it also changes the border radius over there. 89 00:06:14,960 --> 00:06:19,820 So if I set the 20 or five like I originally had it, it changes it. 90 00:06:20,210 --> 00:06:28,520 If I think that this text is way too small or too large, I can bump that down a bit. 91 00:06:29,300 --> 00:06:35,000 If this label I feel like is too dark, I can change that as well. 92 00:06:37,180 --> 00:06:38,140 And all of a sudden. 93 00:06:39,350 --> 00:06:40,280 This instance. 94 00:06:41,560 --> 00:06:48,640 Has changed based off of the changes I made here, so build your components with the Tomac elements 95 00:06:48,640 --> 00:06:54,510 and you can easily have so much control over your larger, more complex components. 96 00:06:55,090 --> 00:06:58,510 And that's an easy way to use atomic elements within Vigna.