Skip to content
pwilkowski edited this page Oct 12, 2019 · 7 revisions

What is StdUi

StdUi stands for StandardUi. Which means this library is a provides a factory for default blizzard UI objects such as Button, FontString, EditBox.

StdUi does not create proxy objects except for complex widgets such as ScrollTable.

Mission

Library aims to be alternative to AceGUI that does not have a fixed layout nor forces you to do layout functions. In addition, it produces widgets similar to the looks of ElvUI.

Quick Start

Bootstrap LibStub and StdUi in your addon TOC file:

Libs\LibStub\LibStub.lua
Libs\StdUi\StdUi.xml

Then you can use StdUi in your lua files:

local StdUi = LibStub('StdUi');

You do not need to include all widgets if you plan to use only some of them.

Customization

You might want to use different color/fonts configuration but to do so, create new instance instead of using global functions:

local StdUi = LibStub('StdUi'):NewInstance();
StdUi.config = {
    -- your config
};

Full config object should look like this:

{
	font        = {
		family    = font,
		size      = fontSize,
		titleSize = largeFontSize,
		effect    = 'NONE',
		strata    = 'OVERLAY',
		color     = {
			normal   = { r = 1, g = 1, b = 1, a = 1 },
			disabled = { r = 0.55, g = 0.55, b = 0.55, a = 1 },
			header   = { r = 1, g = 0.9, b = 0, a = 1 },
		}
	},

	backdrop    = {
		texture        = [[Interface\Buttons\WHITE8X8]],
		panel          = { r = 0.0588, g = 0.0588, b = 0, a = 0.8 },
		slider         = { r = 0.15, g = 0.15, b = 0.15, a = 1 },

		highlight      = { r = 0.40, g = 0.40, b = 0, a = 0.5 },
		button         = { r = 0.20, g = 0.20, b = 0.20, a = 1 },
		buttonDisabled = { r = 0.15, g = 0.15, b = 0.15, a = 1 },

		border         = { r = 0.00, g = 0.00, b = 0.00, a = 1 },
		borderDisabled = { r = 0.40, g = 0.40, b = 0.40, a = 1 }
	},

	progressBar = {
		color = { r = 1, g = 0.9, b = 0, a = 0.5 },
	},

	highlight   = {
		color = { r = 1, g = 0.9, b = 0, a = 0.4 },
		blank = { r = 0, g = 0, b = 0, a = 0 }
	},

	dialog      = {
		width  = 400,
		height = 100,
		button = {
			width  = 100,
			height = 20,
			margin = 5
		}
	},

	tooltip     = {
		padding = 10
	}
};