Dropdown

Dropdown

StdUi:Dropdown(parent, width, height, options, value)

Description:

Note: Depends on Button, Scroll Widgets

Dropdown component is similar to HTML select element. It is nowhere near as complex as Blizzard UIDropDownMenu mostly because in usual cases you need something simple. UIDropDownMenu has meaning in context menus but does pretty poor job as simple select.

Main body of select is a Button and list of option is FauxScrollFrame. Unlike HTML select, option list will always match select width.

Arguments:

• parent Frame - object that should be a parent
• width number (Optional) - Width of the panel
• height number (Optional) - Height of the panel
• options table - List of elements
• value any - Initial value of Dropdown

Returns:

• Button

Options format:

Options should be array of tables. Each option should have text and value. Each option may contain additional elements. value may be of any type however number or string is recommended.

Note: values should be of the same type across all options

local items = {
   {text = 'Test 1', value = 1}, -- First option
   {text = 'Test 2', value = 2, anyElement = 'Something'}, -- Second option
};

Methods:

• SetOptions(options) - Sets the options table
• SetValue(value, text) - Sets the value of Dropdown, text is optional to text to display, may not match any value from the options table allowing you to set ex. Please select placeholder.
• GetValue() - Gets the current value of Dropdown
• FindValueText(value) - Finds the text of any value withing options table

Named children:

• dropdown.text - FontString - font string that is used as dropdown text
• dropdown.dropTex - Texture - Arrow Texture on the right of dropdown
• dropdown.options - table - Table of options
• dropdown.optsFrame - Texture - options FauxScrollFrame object
• dropdown.optsFrame.scrollChild Frame - Scroll Child frame (it holds all option buttons)
• dropdown.optsFrame.scrollChild.items table - Table of all option buttons

Because optsFrame is a FauxScrollFrame widget, please refer: Here for a detailed information.

Demo

local StdUi = LibStub('StdUi');

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

local items = {
   {text = 'test 1', value = 1},
   {text = 'test 2', value = 2},
   {text = 'test 3', value = 3},
   {text = 'test 4', value = 4},
   {text = 'test 5', value = 5},
   {text = 'test 6', value = 6},
   {text = 'test 7', value = 7},
};

local dd = StdUi:Dropdown(window, 200, 20, items, 2);
dd:SetPoint('CENTER');

local items2 = {
   {text = 'test 4', value = 'one'},
   {text = 'test 2', value = 'two'},
   {text = 'test 3', value = 'three'},
   {text = 'test 4', value = 'four'},
};

local dd2 = StdUi:Dropdown(window, 200, 20, items2);
dd2:SetValue(nil, '-- Please Select --');
StdUi:GlueBelow(dd2, dd, 0, -20);

Result: