Confused by Tab element!

Is there any resource that can show me how the built-in tab element works? I restyled the active and default states for a single tab, and they seem to work when previewing. How do I apply those state styles to the other 2 tabs? - ALSO, if I duplicate my styled tab, it appears BENEATH the original, instead of beside. I can’t tell if it’s because those tabs are in a vertical section, or if its the alignment settings???

when you copy paste your tabs, be sure that you are selected the highest container in the Navigator Tree, or the copy/paste will be happening inside the tab header.
To style, you need to create an “active” state, and style here. If you duplicate an existing tab, this should already be done.

Thanks for your reply, but i’m still confused. Not sure what you mean about defining a state at the highest level. The built-in tab element has the active state defined at the text level (see attached). The only higher level than that is the TAB element, and when I tried to define an active state for that element it had no effect on the styling of the actual tabs. The only way I could implement my design was to create the same active state style for EVERY tab. If there’s a better way to do it, please tell me what I’m missing. Also, if you duplicate a text (the name of the tab), the new tab appears below the other tabs on a separate row. I can’t for the life of me figure out why that is - Grrrr
Screen Shot 2023-04-06 at 8.24.24 PM

For the question regarding pasting a tab and it appears below:

The reason this occurs is because you are not creating a new tab, you are only adding another text inside the current tab. To create a new tab you should select ‘Tabs’ in the navigator, head to the second section of the right panel and click the plus icon under ‘Specific’

For styling, yes, if you want to change the active style of every tab you will need to do this for each one of them. We’re aware of UX shortcomings of the element and this should be worked on sometime in the future.

1 Like

thanks. that answers my question