-
Notifications
You must be signed in to change notification settings - Fork 28
Layout Builder
pwilkowski edited this page Oct 13, 2019
·
3 revisions
Layout builder depends on EasyLayout
. It basically lets you create UI from configuration. Similar to AceConfig however not just limited to addon configuration.
Layout builder can be infinitely recursive, each widget can be container which can have yet another layout.
StdUi:BuildWindow(frame, info)
Arguments
-
frame
- Frame that will act as container -
info
- layout info
Layout Info
Layout info is a simple object composed like this:
{
layoutConfig = { padding = { top = 30 } }, -- layout config for easy layout
rows = {
{ -- first row, equivalent of EasyLayoutRow
widget = {
type = 'tab', -- widget type, look below for widget types
-- other widget info
column = 12, -- column capacity widget will take, 12 is default (whole row)
order = 1, -- widgets are rendered by order, if you do not set this, it will be randomly placed
}
},
},
};
Widget Types
Builder supports really big amount of widgets you can use including custom function.
checkbox
editBox
multiLineBox
dropdown
autocomplete
slider
color
button
header
label
texture
-
panel
- container scroll
fauxScroll
tab
-
custom
- custom function
Every widget can have those properties:
-
key
- string - By default, if you append database toLayoutInfo
, it will set widget value depending on key of widget, use this property to override this behavior, supports nested variables like'some.db.value'
-
type
- string - Widget type -
column
- number - Widget column width -
order
- number - Widgets are sorted in rows using this property -
init
- function(widget) - Function to execute at the beginning of initialization -
label
- string - If you want to have label above widget, use this -
initialValue
- any - set initial value to widget -
onChange
- function(...) - function that will be executed when value of widget changes -
onValueChanged
- function(...) - function that will be executed when value of widget changes this will unbind widget from database -
children
- LayoutConfig - for container widgets, pass yet anotherlayoutConfig
-
fullSize
- bolean - if set to true, widget will take WHOLE parent space. Use this only for a single widget -
fullHeight
- bolean - if set to true, widget will take remaining vertical space
-
options
- table - array of options like{ value = 1, text = 'Test' }
-
multi
- boolean - if dropdown should be multiselect -
assoc
- boolean - if dropdown should be in associative array mode
-
validator
- function - Validator function for autocomplete -
transformer
- function - Transformer function for autocomplete -
buttonCreate
- function - custom function to create autocomplete options -
buttonUpdate
- function - custom function to update autocomplete options -
items
- table - array of autocomplete options like{ value = 1, text = 'Test' }
-
precision
- number - Slider precision
-
color
- table - Initial color like{ r = 1, g = 1, b = 1, a = 1 }
-
onClick
- function(button) - OnClick script handler
-
width
- number - Width of texture -
height
- number - Height of texture -
texture
- string - Texture path
-
scrollChild
- Frame|function(scrollWidget) - Either initialization function or ready scrollChild frame
-
displayCount
- number - Amount of items to display -
lineHeight
- number - Single item height
-
tabs
- table - Tabs definition, refer to Tab widget -
vertical
- boolean - Set this to true to have vertical tab widget -
buttonWidth
- number - Toggle button width -
buttonHeight
- number - Toggle button height
-
createFunction
- function(frame, row, info, dataKey, db) - Function that allows you to create custom component-
frame
- Frame - parent frame -
row
- EasyLayoutRow - normally, you don't need to make use of that -
info
- table - widget definition, and all the data you passed alongsidecreateFunction
-
dataKey
- string - data key to access within database, so either widget key or key property -
db
- table - database object to write values into
-