I’m trying to do a tab-component, that would work just like flexbox does.
Tabs should stretch to fill the available space. The tabs should not all be equally sized but sized according to their intrinsic width, and the left over space should be distributed between them.
You can see my image here, can I do this?
For this use case, are you wanting the purple line to go all the way across? Or just for the active tab? And if just the active tab, does it stop just after the ends of the text, or do you want to extend the line longer to fill up 50% of the empty space to the left and right?
I added more images to hopefully make it more clear what I’m after.
I want the tabs to span the full width of the container element without the tabs to be forced into equal width. That is, they should each take up their intrinsic width (which is different because the text is different) and then they should divide the remaining space between them so that they fill the container.
This is how I want it to behave.
This is how it behaves.
You can see my file: Figma
Is this what you need?
Hi Johan, currently struggling with the same problem. How did you solve this for you?
Hi Leon.
This was some time ago so I don’t remember that clear but I never solved it in any beautiful way. I think I had to make my component more static to “solve” this problem. However, I haven’t used Figma for a while now so there might be some new solution that I’m not aware of now.
