Updated Dropdown (markdown)
Robert Jelic
202
Dropdown.md
202
Dropdown.md
@@ -1,110 +1,178 @@
|
||||
Dropdowns are objects which looks like a button, but as soon as you click on them, they will open a dropdown where you can choose a value. But first you will have to add possible values
|
||||
Dropdowns are objects where you can create endless entrys the user can click on a button and it opens a "list" where the user can choose a entry
|
||||
|
||||
Here is a example of how to create a standard dropdown:
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
````
|
||||
|
||||
This will create a default dropdown with the size 5 width and 1 height on position 1 1 (relative to its parent frame), the default background is colors.lightBlue, the default text color is colors.black and the default zIndex is 10. The default horizontal text align is "center"
|
||||
|
||||
Here are all possible functions available for dropdowns. Remember dropdown inherit from [object](https://github.com/NoryiE/NyoUI/wiki/Object):
|
||||
Here are all possible functions available for dropdowns: <br>
|
||||
Remember dropdown inherits from [object](https://github.com/NoryiE/basalt/wiki/Object):
|
||||
|
||||
## addItem
|
||||
Adds a item to the list
|
||||
Adds a item to the dropdown
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
````
|
||||
**args:** text, bgcolor, fgcolor, ..., text is the displayed text, bgcolor and fgcolors the colors of background/text and args (...) is something dynamic, you wont see them but if you require some more information per item you can use that.<br>
|
||||
**returns:** the object<br>
|
||||
**parameters:** string text, number bgcolor, number fgcolor, any ... - (text is the displayed text, bgcolor and fgcolors the colors of background/text and args (...) is something dynamic, you wont see them but if you require some more information per item you can use that)<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## removeItem
|
||||
Removes a item to the list
|
||||
Removes a item from the dropdown
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropDown:removeItem(2)
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:removeItem(2)
|
||||
````
|
||||
**args:** item table (you can get with :getValue()) OR item index<br>
|
||||
**returns:** the object<br>
|
||||
**parameters:** number index<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## setActiveItemBackground
|
||||
## editItem
|
||||
Edits a item on the dropdown
|
||||
|
||||
````lua
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:editItem(3,"3. Edited Entry",colors.yellow,colors.green)
|
||||
````
|
||||
**parameters:** number index, string text, number bgcolor, number fgcolor, any ...<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## setScrollable
|
||||
Makes the dropdown scrollable
|
||||
|
||||
````lua
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:setScrollable(true)
|
||||
````
|
||||
**parameters:** boolean isScrollable<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## selectItem
|
||||
selects a item in the dropdown (same as a player would click on a item)
|
||||
|
||||
````lua
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:selectItem(1)
|
||||
````
|
||||
**parameters:** number index<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## clear
|
||||
clears the entire list (dropdown)
|
||||
|
||||
````lua
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:clear()
|
||||
````
|
||||
**parameters:** -<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## getItemIndex
|
||||
returns the item index of the currently selected item
|
||||
|
||||
````lua
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:getItemIndex()
|
||||
````
|
||||
**parameters:** -<br>
|
||||
**returns:** number index<br>
|
||||
|
||||
## setSelectedItem
|
||||
Sets the background of the item which is currently selected
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropDown:setActiveItemBackground(colors.green)
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:setSelectedItem(colors.green, colors.blue)
|
||||
````
|
||||
**args:** any color<br>
|
||||
**returns:** the object<br>
|
||||
**parameters:** number bgcolor, number fgcolor, boolean isActive (isActive means if different colors for selected item should be used)<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## setActiveItemForeground
|
||||
Sets the foreground of the item which is currently selected
|
||||
## setOffset
|
||||
sets the dropdown offset (will automatically change if scrolling is active)
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropDown:setActiveItemForeground(colors.red)
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:setOffset(3)
|
||||
````
|
||||
**args:** any color<br>
|
||||
**returns:** the object<br>
|
||||
**parameters:** number offsetValue<br>
|
||||
**returns:** self<br>
|
||||
|
||||
## setItemColors
|
||||
Sets item background colors in the list
|
||||
you can set as many colors as you want, it will set one color per line, if it got to the last color it will go back to the first color
|
||||
## getOffset
|
||||
returns the current offset
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropDown:setItemColors(colors.red,colors.blue)
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:getOffset()
|
||||
````
|
||||
**args:** any color - multiple colors possible<br>
|
||||
**returns:** the object<br>
|
||||
**parameters:** -<br>
|
||||
**returns:** number offsetValue<br>
|
||||
|
||||
## setItemTextColors
|
||||
Sets item text colors in the list
|
||||
you can set as many colors as you want, it will set one color per line, if it got to the last color it will go back to the first color
|
||||
## getOffset
|
||||
returns the current offset
|
||||
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropDown:setItemTextColors(colors.blue,colors.red)
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:getOffset()
|
||||
````
|
||||
**args:** any color - multiple colors possible<br>
|
||||
**returns:** the object<br>
|
||||
**parameters:** -<br>
|
||||
**returns:** number offsetValue<br>
|
||||
|
||||
## setDropdownSize
|
||||
sets the dropdown size (if you click on the button)
|
||||
|
||||
# Examples
|
||||
Get the selected item informations:
|
||||
````lua
|
||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
||||
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||
aDropDown:addItem("1. Entry")
|
||||
aDropDown:addItem("2. Entry",colors.yellow)
|
||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropDown:onChange(function(self)
|
||||
NyoUI.debug(self:getValue().text,self:getValue().bgcolor,self:getValue().fgcolor,self:getValue().vars)
|
||||
end)
|
||||
````
|
||||
aDropdown:addItem("1. Entry")
|
||||
aDropdown:addItem("2. Entry",colors.yellow)
|
||||
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||
aDropdown:setDropdownSize(12, 4)
|
||||
````
|
||||
**parameters:** number width, number height<br>
|
||||
**returns:** self<br>
|
||||
Reference in New Issue
Block a user