Starting Our Accordion

In This Lesson

We'll start our accordion component and gain an understanding of how to handle uniquely identifying components that may appear multiple times on a single page via the AlpineJS magic id utility.

Created by: @tomgobich
Published: 2 years ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

- So today we're gonna be taking a look at our first Pines UI component that already has AlpineJS baked in and ready to go.
And we're gonna be taking a look at the accordion component. So there's a basic version right here that already has borders on it. You hover over it, you click on it and it toggles something active
and there's no items active by default. That's the same for all three of the different styles that they have here. They have another one that is borderless until you click on it. And then they have another one
that is borderless altogether. So throughout this module, we're gonna be building all three of these different variants. They're gonna be relatively simple. However, they're doing something within AlpineJS
that we have not yet taken a look at. And that's using a utility method called $ID. If we take a look at this real quick in the AlpineJS documentation,
it's a magic property that can be used to generate an element's ID to ensure that it won't conflict with any of the other IDs that you have on your page. When we're building components on the server side,
this magic property becomes very useful because we don't have to actually keep track of the various IDs that we're using on the page. This will do it automatically,
especially for repetitive items like accordion items that you might have up to 10 of in any particular element. You might have more than one accordion on the same page. So within our components,
anytime that you see the $ID, just note that that is generating out a dynamic ID for us based off of a base input that we provide to it. Okay, so now that we know what that is,
let's jump back over into the Pines UI documentation and let's give this first example here a copy and then jump back into our code base. And then within our components directory,
let's go ahead and create a new file. We'll do accordion as the folder and then we'll do index.edge as the file.
So we can go ahead and paste what we have in. Looks like it came with zero formatting, so I'm going to go ahead and just format the document here. Cool, that's better. Looks like that didn't take care of our x-data.
I'm gonna go ahead and just format that real quick. Okay, so first off, you can see that we have a couple of things going on within our x-data. We have an active accordion, which is set to an empty string. Whenever we actually click on an item,
this will then be set to that item's ID as generated by that utility function that we just took a look at, $ID. And that's being set via the set active accordion. The ID is being passed into there
where this then sets that as the active accordion in a graceful way where it won't just keep resetting. We have from this element up
as our base div inside of there are our repeating items. So we can collapse these down and easily see that we have three items within here to take care of.
While we have these collapsed down, let's take a look at the class list on this root element. We see that the border is being done at this level. If we take a look back at the documentation for the item,
you see the borders there. It does have bordering in between them. So let's go ahead and jump back in here and look for a divide. And there it is. So it's a divide Y, which is setting the border in between the items.
So all of the bordering here can be said to be done on this base element. Nothing for the border is being done on the item itself, which means that we can go ahead
and get rid of these two extra items that we have. And then let's expand that item back out. I'm gonna put the class list right there on the button itself to clean that up a little bit
from the formatting. We see that we have our SVG. If you're using an icon library, you can swap that out for something else. Prior to that SVG, we have the actual title. And with that selected,
I'm gonna go ahead and just hit enter to clear that out and put it on a new line. Now for accordions, you're gonna want a title in it so that you know what it is that you're actually clicking on. So we're gonna make the title required here
by doing double curly braces and then just using it directly without any if check. However, it would also be nice to allow slot content within here as well so that you can put whatever you need
inside the actual title portion of the accordion. So let's jump back into here and let's do wrap this in an if. So if, and let's check for the slots.title,
we'll have our else then, and then we'll end our if. We won't do an else if to check whether or not we have a title again, because the title will be required. If we have a title slot,
then we'll go ahead and do our three curly braces, await slots.title, and there we go. And then if we scroll on down, we should see the actual accordion content right here.
We can go ahead and get rid of that and just replace that with a main slot. So slots.main right there. Give that a save. Now let's go ahead and jump over to our components pages,
add in a new file, and we'll call this accordion.edge. I'm gonna go ahead and copy and paste what we have for the alert here and cut out all of the examples. So we'll get rid of that.
And then we'll get rid of the underlying alert here, keeping just the base alert section, and we'll do base accordion. We can give that a save. Now let's jump back into our routes
and actually add this into our items. So we have alert, button. Let's go ahead and keep this in alphabetical order. So we'll put accordion first. Should be able to give this a save. Jump back into our browser now
and let's head into our application, give it a refresh. And there we go. So now we have accordion, alert, and button. Let's click into accordion. And we don't have anything here quite yet. Let's go ahead and make use of our component
within this page. So let's jump back into accordion. And at this point, it's just at accordion. We accept in some form of a title. We'll go ahead and just do that as a prop,
the base accordion. And then we need some slot content. So we'll go ahead and end. And I'm just gonna place in some ellipses. Cool, so we'll give that a save,
jump back into the browser. So at this point, you'll notice the way that we have this rigged up is quite limited. We can only have one item with this particular accordion component,
at which point we would need to copy the whole component, paste it in numerous times for each accordion that we need. And you'll see that that's just not gonna work out appropriately.
So we'll take a look at fixing this within the next lesson.

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.