Creating a re-useable tab component?

DarrenBignall · 2023-08-16T14:12:28.715+00:00

Hi team, Just wondered if you had any suggestions on the best way to build a tab component so that it is re-useable, got a few ideas on making something work when i know how many tabs there will be, but for a reusable version that takes the amount of tabs required dynamically I am struggling.I started by building some tabs that are repeating over a tabData attribute which will give a dynamic amount of tabs, I was then thinking about using a slot where the slot name is set by a formula, but looks like we can't set slot names in that way, so wondered if you had any suggestions ...?

DarrenBignall
2 years ago
Hi team,

Just wondered if you had any suggestions on the best way to build a tab component so that it is re-useable,

got a few ideas on making something work when i know how many tabs there will be, but for a reusable version that takes the amount of tabs required dynamically I am struggling.

I started by building some tabs that are repeating over a tabData attribute which will give a dynamic amount of tabs, I was then thinking about using a slot where the slot name is set by a formula, but looks like we can't set slot names in that way, so wondered if you had any suggestions ...?
Raphael Walters
2 years ago
Are you trying to achieve something like this? https://www.loom.com/share/68f73a8c8aa54208a3fd3855d7d76eda?sid=69801227-6fea-4a38-ac5c-2163f9caa650
👍1
💪1
@Raphael Walters
Are you trying to achieve something like this? https://www.loom.com/share/68f73a8c8aa54208a3fd3855d7d76eda?sid=69801227-6fea-4a38-ac5c-2163f9caa650
DarrenBignall
2 years ago
https://tenor.com/view/gentleman-and-scholar-office-gif-21402006
🙌1
going to dig into this today, ill let you know how i get on 🙏
@DarrenBignall
https://tenor.com/view/gentleman-and-scholar-office-gif-21402006
Raphael Walters
2 years ago
I'll keep experimenting to see if I can come up with a more elegant solution
DarrenBignall
2 years ago
https://www.loom.com/share/9f11f99918644bfeb8c3578b8907f696?sid=6babb0fa-db63-4f37-9829-3b7958ffdc84
made a bit of progress, got something working that seems quite simple and dynamic ... not sure if there is a better way to be handling any of it though
🙏1
gazinhio
2 years ago
@DarrenBignall Yeah I think that's the best way to do it as you can't have dynamic slots as each needs a unique name and the name can't be set with a formula. You also can't reference a repeating item from the page in a slot within the component. So I think you've got it pretty much as good as you can based on what Toddle gives you IMHO. @Raphael Walters solution works pretty nicely as well, depends on what end result you want in each situation.
gazinhio
2 years ago
@DarrenBignall One thing you've just shown that I've not tried before, is sending an event from a component back to the page which then makes changes to the content that is passed back into the component via the slot. That is pretty dynamic and very nice, there's a lot I can do with that! Cheers 🔥 👍
🔥1
DarrenBignall
2 years ago
if you think this is the right way @, then i am a happy man 👌
gazinhio
2 years ago
🤷‍♂️ Well, I'm far from the ultimate authority on these things but it looks good and you've taught me something 🧑‍🎓 Nice one
Raphael Walters
2 years ago
@DarrenBignall Firstly, apologies for the delay in getting back to you. A-Level results day for my daughter so it's been a bit manic! Secondly, I LOVE your approach. Way fewer moving parts which is lovely. Thank you for sharing! 👌
DarrenBignall
2 years ago
👍 Hope she got the results she wanted!!
@DarrenBignall
👍 Hope she got the results she wanted!!
Raphael Walters
2 years ago
She did. Thank you!
Andreas Møller
2 years ago
Hey Darren
No there isn’t really a simple way to do that at the moment as you said you can build a generic component for two tabs, but not for a variable number.
Andreas Møller
2 years ago
We are working on ways to achieve this in the future
@Andreas Møller
Hey Darren
No there isn’t really a simple way to do that at the moment as you said you can build a generic component for two tabs, but not for a variable number.
DarrenBignall
2 years ago
👍 cool, the way i did it in the video seems to work well enough for what we need to achieve, just needs a little bit of extra set up on the page, but at least we can just style it once and re-use accross app.
Andreas Møller
2 years ago
Yea I think that is the best approach
It gets really tricky if you want the tab component to handle the selected state
Andreas Møller
2 years ago
In reality you very often run into situations where it is preferable to have the selected tab as a variable in the page anyways 👍
Our next big project is going to be the ability to install components from other projects
So hopefully you will share the great work you have done here with the next person 🙂
🤘1
@Andreas Møller
In reality you very often run into situations where it is preferable to have the selected tab as a variable in the page anyways 👍
DarrenBignall
2 years ago
yes this makes sense
Tom Ireland
2 years ago
You just saved me some headache here, @DarrenBignall . Was just away to post a video about tabbed nav state issues I was having and then decided to do a quick search. The use of index here is awesome! And I wasn't even thinking about slots for data - I was handling it on the page. Refactored my tabbed nav so that state with classes is handled perfectly and will refactor later for data slots. What a legend! 🙂 🤘
🙌1

Creating a re-useable tab component?

DarrenBignall

Raphael Walters

DarrenBignall

Raphael Walters

DarrenBignall

gazinhio

gazinhio

DarrenBignall

gazinhio

Raphael Walters

DarrenBignall

Raphael Walters

Andreas Møller

Andreas Møller

DarrenBignall

Andreas Møller

Andreas Møller

DarrenBignall

Tom Ireland