Slots Exercise

[00:00:00]
>> So if you pull down 08 exercise you'll be able to see all the code that we just did. I want you to go ahead on your own app create your own base layout play around slots see how you might want to rearrange things see how that feels when you have one slot versus having multiple slot one name slots.

[00:00:20]
All right, how did everyone feel about playing around with slots? Good, fairly straightforward. That is great to hear. Okay, so what I'm gonna do is just basically, I'm gonna take a look at the ATLLI forum on my end and we'll just do a quick one as far as that goes.

[00:00:38]
So let me go ahead and check out a branch, 08-solution cd atla. Great, run dev, everything should be running as expected. Yep, perfect. Okay so when I'm looking at atla, I'm thinking, okay, well, base component, what does a base layout look like? So I'm gonna go ahead, create my base layout.view, inside of here, let's keep it simple.

[00:01:09]
So we're just gonna have the template and all that it manages is where things are placed. So we'll actually just create basically as to how many things we have four things. All right, so let's do a div and then we'll have here so we'll call this class grid, and then we'll say, this is actually the same open a style block.

[00:01:33]
And for grid will display grid, and grid template columns, repeat 2, 1fr, basically this will repeat two columns inside of this. So div and div, and then for now, let's just go ahead and drop this to make this a slot And then we'll say the name for this slot is one this will be the first one and then we'll copy this and then just drop it in here for two, auto complete just slot.

[00:02:11]
Thank you for catching that. Okay, inside of our app, we're gonna go ahead, grab that and then this will be base layout, go ahead and copy that base layout. Then wash it, call it here, and this time in base layout we'll go ahead and let's take our new character down here, I think that's all of this stuff.

[00:02:37]
And then let's just drop that in the first slot to start. So where are we here? Okay, so we'll have the template here, dropping in the new character and the the slot we're looking for is one. So if you save that, you'll see that we're actually I guess, let me show this so that it's a little bit clearer.

[00:02:58]
Five here solid green, actually what's the fun? Papayawhip love that one let's do it. [LAUGH] Okay, not very accessible though, I like the name. Okay, so we can see here that that is showing up on the left hand side and then all we need to do if you want to swap it, for example, is just do the slot two, then you see it jumps from left to right.

[00:03:18]
So that's just a simple implementation of a possible grid and you can imagine when start combining CSS, slotting stuff around, you get some pretty powerful stuff when it comes to responsive design as well.