Automatic Layout

StdUi Provides a way to build your own window using 12 column layout like Bootstrap: https://getbootstrap.com/docs/4.3/layout/grid/

EasyLayout

First, you need to bootstrap easy layout functionality to any frame that is going to be container. This will add 2 new methods to your Frame:

Methods:

• AddRow(config) - Adds new row to config, returns Row object, for config reference, look below.
• DoLayout() - Performs layout mechanism to align widgets. This needs to be called each time frame is resized or once when it is shown.

StdUi:EasyLayout(parent, config)

Arguments:

• parent - Frame that is going to be layout container
• config - optional configuration, look below

Named children:

In addition to new methods, 2 new named children will be added to frame:

• stdUi - reference to current StdUi library instance
• layout - layout configuration, if you decide to modify layout config, run DoLayout() again.

Layout Config:

{
	gutter  = 10, -- distance between component horizontally
	columns = 12, -- number of columns
	padding = { -- internal container padding
		top    = 0, 
		right  = 10,
		left   = 10,
		bottom = 10,
	}
}

Row Config

{
	margin = { -- Whole row margins
		top    = 0,
		right  = 0,
		bottom = 15,
		left   = 0
	}
}

EasyLayoutRow

This function is equivalent of running directly frame:AddRow(config) and basically it is responsible for handling and drawing rows.

WARNING: You must set height of each widget yourself, row height depends on tallest widget in row

StdUi:EasyLayout(parent, config)

Returns:

Row object as follows:

{
	parent   = parent, -- parent frame
	config   = {}, -- row config or default row config
	elements = {}, -- list of row elements
	-- And methods described below
}

Row Methods

• AddElement(frame, config) - adds a single widget to row, as for config look below
• AddElements(..., config) - adds multiple widgets to row, config parameter unlike in previous function, supports even columns by setting config to { column = 'even' }
• GetColumnsTaken()- Calculates how many columns has been taken in this row
• DrawRow(parentWidth, yOffset) - Draws a single row, Do not call it directly, it gets called in DoLayout() function.

Widget Config

{
	fullSize = false, -- if you set it to true, a single widget will cover entire parent, not just horizontally
	fullHeight = false, -- if you set it to true, widget will take remaining vertical space in parent.
	margin = {
		top    = 0,
		right  = 0,
		bottom = 0,
		left   = 0
	}
}

Demo

---@type StdUi
local StdUi = LibStub('StdUi');

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

StdUi:EasyLayout(window, { padding = { top = 40 } });

-- Editboxes
local e1 = StdUi:SearchEditBox(window, nil, 20, 'Search');
local e2 = StdUi:MoneyBox(window, nil, 20, '10g');
local e3 = StdUi:NumericBox(window, nil, 20, '15');

StdUi:AddLabel(window, e1, 'Search Label');
StdUi:AddLabel(window, e2, 'Money Label');
StdUi:AddLabel(window, e3, 'Search Label');

-- Row top margin to account for labels
local r1 = window:AddRow({ margin = { top = 20} });
r1:AddElement(e1, { column = 6 });
r1:AddElement(e2, { column = 3 });
r1:AddElement(e3, { column = 3 });

local l1 = StdUi:Label(window, 'Some Label 1');
local l2 = StdUi:Label(window, 'Some Label 2');
local l3 = StdUi:Label(window, 'Some Label 3');
local l4 = StdUi:Label(window, 'Some Label 4');

local r2 = window:AddRow();
r2:AddElements(l1, l2, l3, l4, { column = 'even' });

local he = StdUi:MultiLineBox(window, 200, 200, 'Initial Text');

local r3 = window:AddRow();
r3:AddElement(he);

-- Row with custom paddings
local r4 = window:AddRow({ margin = { right = 10, left = 10 } });

local buttons = {};
for i = 1, 12 do
	local b = StdUi:Button(window, nil, 20, 'B' .. i);
	tinsert(buttons, b);
end
tinsert(buttons, { column = 'even' });
r4:AddElements(unpack(buttons));

-- run this once, or set it as OnShow script handler
window:DoLayout();