Tab Container

Component stability: Beta

StdUi give you ability to create Tab container:

Warning: Vertical tabs has not been implemented yet.

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

Warning: Your tabs object will be modified.

Arguments:

• parent Frame - object that should be a parent
• width number (Optional) - Width of the table
• height number (Optional) - 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:

• EnumerateTabs(callback) - Iterates over all tabs and executes callback passing tab object to it.
• HideAllFrames() - Hides all tab frames (not buttons)
• DrawButtons() - (Re)draws all tab buttons
• DrawFrames() - (Re)draws tab containers, if they exist, it will just re-anchor them.
• Update(tabs) - Updates table definition (this calls functions DrawButtons() and DrawFrames())
• GetTabByName(name) - Returns tab object by its name. Making direct modifications to tab.button or tab.frame will have immediate effect on them.
• SelectTab(name) - Programmatically select tab by its name.
• GetSelectedTab() - Returns currently selected tab object

Demo

local StdUi = LibStub('StdUi');


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

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

local tabFrame = StdUi:TabPanel(window, nil, nil, t);
StdUi:GlueAcross(tabFrame, window, 10, -100, -10, 20);

tabFrame: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 b = StdUi:Button(window, 100, 20, 'Add Tab');
StdUi:GlueTop(b, window, 10, -30, 'LEFT');
b:SetScript('OnClick', function()
      tinsert(t, {name = 'anotherTab' .. (#t + 1), title = 'Another Tab'});
      tabFrame:Update(t);
end);