Unknown number of tab buttons to fill parent frame

I want to create a tabbed gui such that the tabs themselves together fill a parent frame so that if there is 3 or 7 tabs present, the 3 tabs will have 1/3 width (scale) and the 7 tabs will have 1/7 width (scale). The topology of the gui looks like this where the number of tabs may change at runtime;


I could probably just loop through the tabs and set the scale but this seems inelegant and errorprone. Is there a “declarative” way to achieve this?

Example images for 3 tabs:

Example images for 7 tabs:


Everytime a child is added/removed from “TabsFrame” just do this:

local function UpdateTabsWidth()
	-- If we know there is 1 object in Tabs that isn't a tab (UIListLayout) then we can do the following.
	local TabsAmount = #TabsFrame:GetChildren()-1
	for _, Tab in pairs(TabsFrame:GetChildren()) do
		if not Tab:IsA("Frame") then continue end
		Tab.Size = UDIM2.new(1/TabsAmount,0,1,0)

1 Like

Thanks, this was what I was hoping to avoid, but I guess the answer is “there is no way to avoid looping thorugh the buttons”

Looping through the buttons are not at all a bad practice! Since we want to change the size of all of them. So there is no need to avoid it. :slight_smile:

I guess you are right. I have been tainted after decades of front-end programming and CSS where such things are frowned upon, you are supposed to set all design related parameters declaratively without using code.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.