Tab Container

Component stability: Beta

TabPanel

StdUi give you ability to create Tab container:

StdUi:TabPanel(parent, width, height, tabs)

Warning: Your tabs object will be modified.

Arguments:

Argument	Type	Optional	Description
parent	Frame	-	object that should be a parent
width	number	-	Width of the Tab container
height	number	-	Height of the table
tabs	table	-	Tabs definition (format below)

Returns:

• Frame

tabs format:

local t = {
   {
      name = 'firstTab',
      title = 'First',
   },
   {
      name = 'secondTab',
      title = 'Second',
   },
   {
      name = 'thirdTab',
      title = 'Third'
   }
}

Each tab should be table at least name and title.

After drawing tabs tab object gets transformed from:

local singleTab = {
	name = 'firstTab',
	title = 'First',
}

to:

local singleTab = {
	name = 'firstTab',
	title = 'First',
	button = BUTTON -- this will be object of the button that acts like trigger
	frame = FRAME -- this will be object that is a single tab container
}

Important: You CAN provide existing frames in tab definition. They will be anchored to container. You can also provide button but you would need to handle OnClick script yourself so it is not advised.

Methods:

Aside from having all Frame methods, tab container also has:

Function	Returns	Arguments	Description
EnumerateTabs(callback, ...)	result of callback	function(tab, tabPanel, ...)	Iterates over all tabs and executes callback passing tab object to it. If callback returns non false value, enumeration is stopped and result is returned
HideAllFrames()	-	-	Hides all tab frames (not buttons)
DrawButtons()	-	-	(Re)draws all tab buttons
DrawFrames()	-	-	(Re)draws tab containers, if they exist, it will just reanchor them.
Update(tabs)	-	table	Updates table definition (this calls functions DrawButtons() and DrawFrames())
GetTabByName(name)	table	string	Returns tab object by its name. Making direct modifications to tab.button or tab.frame will have immediate effect on them.
SelectTab(name)	-	string	Programmatically select tab by its name.
GetSelectedTab()	table	-	Returns currently selected tab object

Demo

local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 800, 400, 'Title');
window:SetPoint('CENTER');

local t = {
	{
		name = 'firstTab',
		title = 'First',
	},
	{
		name = 'secondTab',
		title = 'Second',
	},
	{
		name = 'thirdTab',
		title = 'Third'
	}
}

local t2 = CopyTable(t);

local tabFrameV = StdUi:TabPanel(window, nil, nil, t, true);
local tabFrameH = StdUi:TabPanel(window, nil, nil, t2, false);
StdUi:GlueAcross(tabFrameV, window, 10, -100, -410, 20);
StdUi:GlueAcross(tabFrameH, window, 410, -100, -10, 20);

tabFrameV:EnumerateTabs(function(tab)
	local l = StdUi:Label(tab.frame, 'frejm: ' .. tab.title);
	StdUi:GlueTop(l, tab.frame, 0, -10, 'CENTER');
end);

tabFrameH:EnumerateTabs(function(tab)
	local l = StdUi:Label(tab.frame, 'frejm: ' .. tab.title);
	StdUi:GlueTop(l, tab.frame, 0, -10, 'CENTER');
end);

-- button to add tabs

local bV = StdUi:Button(window, 100, 20, 'Add Tab');
local bH = StdUi:Button(window, 100, 20, 'Add Tab');

StdUi:GlueTop(bV, window, 10, -30, 'LEFT');
StdUi:GlueTop(bH, window, 410, -30, 'LEFT');

bV:SetScript('OnClick', function()
	tinsert(t, {name = 'anotherTab' .. (#t + 1), title = 'Another Tab'});
	tabFrameV:Update(t);
end);

bH:SetScript('OnClick', function()
	tinsert(t2, {name = 'anotherTab' .. (#t2 + 1), title = 'Another Tab'});
	tabFrameH:Update(t2);
end);