Bordered, Active Bordered, and Plain Variants

In This Lesson

We'll split out three different variants from the accordion item we made in the last lesson. We'll create bordered, active bordered, and plain accordion items.

Created by: @tomgobich
Published: 2 years ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

- Okay, so now let's go ahead and take care of the additional styles for our recording. We have the one where we only get the border anytime the item is active,
and then we have another one that's just plain Jane, no border. So let's go ahead and dive into our project here and let's first compare the differences between the documentation. So within the base one,
we have our border being applied at the root level. So there's no bordering going on within the items itself.
However, if we jump down to the second example's code block, you can see the bordering is not happening at the base level. Instead, it's happening directly on the item.
So we'll need to account for that within our accordion. There's numerous different ways that we can do that. We can start at the top level and cascade our way down, or we can start at the item level and cascade our way up. The second example here does have a lot
of minute little alterations happening specifically on the item. So I think for this one here, it would make sense to have a separate component altogether for the item level.
For the third one, I think we'll keep the icon the same. If we take a look, the icon here is slightly different. This one's a little bit more bold. And if you click on it, it does a little animation,
whereas this one just kind of rotates into an X. I think we'll keep the icon the same as this one here, as it's a little bit more fancy. And then we'll just get rid of the border for it.
I also prefer how this one here is bolded as opposed to this one here being about the same weight. And it's a little bit too close in coloring for my liking here as well.
So we'll kind of just use this one, but just get rid of the border for that third styling. Okay, so let's go and copy what we have here. Jump back into our code base, and let's add an additional accordion item.
So what I'm gonna do here is set a new folder, and we'll call this item. And then inside of the item, I think naming-wise, it makes sense to rename this one that we have already as bordered.
And then we'll do the one that we just copied as index. So we'll paste this in here. I'm gonna go ahead and give it a format. Okay, and then I'm gonna move the item that we have here
inside of the folder. Go ahead and move that. And then we're gonna rename it from item, rename, and we'll call this bordered. So now we'd be able to call that one as accordion item bordered.
So let's jump back down into our components page. And anywhere that we have accordion item, let's go ahead and just do a find and replace to replace that with accordion item and bordered.
Give that a save. And now if we jump back into our application, we should still have the same thing, which we do. So we're looking good here. Go ahead and jump back into our new index item.
And do note that we copied the entire accordion as a whole. So what we need to do is just copy one of these divs inside of here, which is an individual item.
Get rid of everything else and then paste that div back in. I'm gonna go ahead and fix the formatting up here a little bit on this. Break that x-data into a new line. And there we go.
This class is set as an object as well. So I'm just gonna go ahead and nest these down. Okay, cool. So we have two conditional classes going on, border neutral and then border transparent, if the item is not active.
And then the border neutral gets applied if it is active. In addition to that, let's go back over to our previous bordered.index and let's copy the active flag that we have here. So this just goes right above the x-data.
So at this point, we can go ahead and try to use it within our accordion page. Now, before we do anything, do remember that we just changed the accordion that we created in the last lesson to our accordion border.
And the accordion that we're creating in this lesson is now our base accordion. So we'll change this here. We'll just get rid of that bordered on our accordion item. Give this a save. Now we can jump back into our browser.
And you can see we got some bordering going on here. We can go ahead and explain that one out and we get an additional border. So it looks like the icon and everything there is working okay.
We just have some additional bordering going on. And one reason for that is because the border is also being applied at that base accordion level. So we need to jump back into our code, jump to our index.
We can add a conditional bordered flag there. Default that to false as that will match against our base. Then we can go over from the border,
over include the divide, cut that out. And we can apply this conditionally. So we can do class equals, do it as an object,
paste that in and only apply that if bordered is true. We can give this a save. And now we can jump into our border.edge. And as I stated, there is several different ways that we can go about this.
I think the easiest one is to cascade it up. So we'll go ahead and do bordered equals true. In addition to setting our active accordion. However, if we aren't setting an active accordion,
we will want to also apply the bordered. So we'll do X and then within an else and just set bordered equal to true. If this is saved, now we can jump back into our browser.
And all right, things are looking a little bit better here. So our bordered accordion here still looks and behaves correct. What about our new base accordion? Yeah, that looks pretty correct there.
Cool. So the border is only getting applied whenever we expand an item. We have our little icon animation happening there whenever we do expand an item. Now what we have left to do,
since this is behaving correctly, is to actually add in our title and our slot content. So let's jump back into our index, scroll on down,
replace our title with an @if slots.title else, and then an end if, apply our title inside of the else.
Otherwise we'll await slots.title within our it. Scroll down just slightly and let's replace this portion here
with await slots.main. Give that a save. And now if we jump back into our browser, and there we go. So now we have the base accordion, we have our ellipsum as the content.
So we're looking good there. Lastly, let's apply our plane, which is going to extend off of the base. So let's go and copy this, paste it inside of our item,
rename it to plane. Not a whole lot's gonna change here, but we do want to do it as a separate item to kind of match what we have going on naming wise already. So we have accordion item, then we have accordion item bordered.
And then lastly here, we would just do accordion item plane. Let's jump into our plane item. And as I mentioned, not a whole lot's gonna change here. Pretty much we're just gonna want to get rid of the border and then you can make any additional changes
that you might want from here on it. So we'll get rid of the border there. We'll get rid of the border there. Won't have any use for rounded. Don't really have any use for that animation anymore either.
And if you want to, you can go ahead and get rid of the padding X because we don't have a reason to keep padding there anymore since we won't have a border at all. So that would be on our button.
And then we can scroll down to our item itself and just add a padding bottom of five on that as opposed to a padding top. Give that a save, jump back into our browser
and let's see how we did. So we have our plane item down here. We're gonna expand that out. It's taking up the full width. You can see it's in line with our accordion plane title there. So our padding is gone. And there we go.
We have our three different accordions and their style. So we have our base accordion, we have our new bordered accordion, and we have our plain accordion down here.

EdgeJS Components

25 Lessons

1h 42m

Getting Started

Components Overview

Button Component

Alert Component

Accordion Component

Form Component

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.