Unknown number of tab buttons to fill parent frame

[vevstolen]

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:

Thanks!

[TortenSkjold]

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)
	end
end

TabsFrame:ChildAdded:Connect(function()
	UpdateTabsWidth()
end)
TabsFrame:ChildRemoved:Connect(function()
	UpdateTabsWidth()
end)

[vevstolen]

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”

[TortenSkjold]

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.

[vevstolen]

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.