Webstudio
Log in

Join the Webstudio community

Updated 2 months ago

Tabs not working with collections

At a glance
ccramses.
·
I want to have a "Tabs" component which is changing according to my variable.
I hope my video explains what I want to do.

Problem is, that the tabs with don´t seem to work with a collection item.
Is this my fault?

Is my problem clear?
J
c
J
35 comments
JJohn Siciliano
I didnt watch but probably this https://docs.webstudio.is/university/core-components/collection.md#using-collections-within-accordions
ccramses.
Ehm no I think it´s a different problem
JJohn Siciliano
okay looking
JJohn Siciliano
So you added a value attribute to your tabs and provided them a unique value from the collection?
ccramses.
Yes
JJohn Siciliano
Can you screenshot so i can see? I haven't tried this on tabs but suspect thats the issue
JJohn Siciliano
You need to specify an attribute called Value and provide it with something unique
Attachment
image.png
JJohn Siciliano
Though I'm looking at which instance because on Accordions its just the parent Item but Tabs have multiple wrappers
JJohn Siciliano
I think you apply it to both the tab trigger and tab content
JJohn Siciliano
so they maintain a relationship
JJohn Siciliano
e.g. tab trigger 1 as Value "asdf" and tab content 1 as Value "asdf"
ccramses.
But the tab trigger and the tab content don´t have a value attribute (yet)
JJohn Siciliano
add one 🙂
ccramses.
You´re the king
ccramses.
It works
ccramses.
One thing though, how can I edit the default value?
I know it´s in the tabs, but how can I make it depending on the variable?
JJohn Siciliano
Sweet. Can you provide a screenshot so I can add that to docs?
JJohn Siciliano
On Tabs instance IIRC there is a default
ccramses.
Yeah, let me show you what I mean
JJohn Siciliano
BTW you can reference the Radix docs to understand what properties there are to modify https://www.radix-ui.com/primitives/docs/components/tabs
JJohn Siciliano
Ah maybe just bind the first collection value to the default value?
ccramses.
Yeah.. just found out xD
JJohn Siciliano
Cool
ccramses.
Ok, so what do you need for the docs?
JJohn Siciliano
Best res image you can send of the Tab Trigger and Value in view and the Tab Content and value in view
JJohn Siciliano
so 2 images
ccramses.
like this?
Attachment
Screenshot_2024-11-21_at_16.35.09.png
JJohn Siciliano
Yes but with the Navigator in view to just to make sure people know what to select
ccramses.
Like this?
Attachments
Screenshot_2024-11-21_at_16.39.04.png
Screenshot_2024-11-21_at_16.38.57.png
JJohn Siciliano
yep perfect thanks! will get this added to docs
JJohn Siciliano
Boom https://docs.webstudio.is/university/core-components/collection.md#tabs
JJeremy
@John Siciliano, would these images work for the docs?
Attachments
tab-trigger.png
tab-content.png
JJeremy
Simply so you don't need to click into them to see what's happening.
JJohn Siciliano
Yes 🙂 thanks!
JJohn Siciliano
uploading now
Add a reply
Sign up and join the conversation on Discord