Updated Dropdown (markdown)
200
Dropdown.md
200
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:
|
Here is a example of how to create a standard dropdown:
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):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: <br>
|
||||||
|
Remember dropdown inherits from [object](https://github.com/NoryiE/basalt/wiki/Object):
|
||||||
Here are all possible functions available for dropdowns. Remember dropdown inherit from [object](https://github.com/NoryiE/NyoUI/wiki/Object):
|
|
||||||
|
|
||||||
## addItem
|
## addItem
|
||||||
Adds a item to the list
|
Adds a item to the dropdown
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
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>
|
**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:** the object<br>
|
**returns:** self<br>
|
||||||
|
|
||||||
## removeItem
|
## removeItem
|
||||||
Removes a item to the list
|
Removes a item from the dropdown
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||||
aDropDown:removeItem(2)
|
aDropdown:removeItem(2)
|
||||||
````
|
````
|
||||||
**args:** item table (you can get with :getValue()) OR item index<br>
|
**parameters:** number index<br>
|
||||||
**returns:** the object<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
|
Sets the background of the item which is currently selected
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||||
aDropDown:setActiveItemBackground(colors.green)
|
aDropdown:setSelectedItem(colors.green, colors.blue)
|
||||||
````
|
````
|
||||||
**args:** any color<br>
|
**parameters:** number bgcolor, number fgcolor, boolean isActive (isActive means if different colors for selected item should be used)<br>
|
||||||
**returns:** the object<br>
|
**returns:** self<br>
|
||||||
|
|
||||||
## setActiveItemForeground
|
## setOffset
|
||||||
Sets the foreground of the item which is currently selected
|
sets the dropdown offset (will automatically change if scrolling is active)
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||||
aDropDown:setActiveItemForeground(colors.red)
|
aDropdown:setOffset(3)
|
||||||
````
|
````
|
||||||
**args:** any color<br>
|
**parameters:** number offsetValue<br>
|
||||||
**returns:** the object<br>
|
**returns:** self<br>
|
||||||
|
|
||||||
## setItemColors
|
## getOffset
|
||||||
Sets item background colors in the list
|
returns the current offset
|
||||||
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
|
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||||
aDropDown:setItemColors(colors.red,colors.blue)
|
aDropdown:getOffset()
|
||||||
````
|
````
|
||||||
**args:** any color - multiple colors possible<br>
|
**parameters:** -<br>
|
||||||
**returns:** the object<br>
|
**returns:** number offsetValue<br>
|
||||||
|
|
||||||
## setItemTextColors
|
## getOffset
|
||||||
Sets item text colors in the list
|
returns the current offset
|
||||||
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
|
|
||||||
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||||
aDropDown:setItemTextColors(colors.blue,colors.red)
|
aDropdown:getOffset()
|
||||||
````
|
````
|
||||||
**args:** any color - multiple colors possible<br>
|
**parameters:** -<br>
|
||||||
**returns:** the object<br>
|
**returns:** number offsetValue<br>
|
||||||
|
|
||||||
|
## setDropdownSize
|
||||||
|
sets the dropdown size (if you click on the button)
|
||||||
|
|
||||||
# Examples
|
|
||||||
Get the selected item informations:
|
|
||||||
````lua
|
````lua
|
||||||
local mainFrame = NyoUI.createFrame("myFirstFrame"):show()
|
local mainFrame = basalt.createFrame("myFirstFrame"):show()
|
||||||
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
local aDropdown = mainFrame:addDropdown("myFirstDropdown"):show()
|
||||||
aDropDown:addItem("1. Entry")
|
aDropdown:addItem("1. Entry")
|
||||||
aDropDown:addItem("2. Entry",colors.yellow)
|
aDropdown:addItem("2. Entry",colors.yellow)
|
||||||
aDropDown:addItem("3. Entry",colors.yellow,colors.green)
|
aDropdown:addItem("3. Entry",colors.yellow,colors.green)
|
||||||
aDropDown:onChange(function(self)
|
aDropdown:setDropdownSize(12, 4)
|
||||||
NyoUI.debug(self:getValue().text,self:getValue().bgcolor,self:getValue().fgcolor,self:getValue().vars)
|
|
||||||
end)
|
|
||||||
````
|
````
|
||||||
|
**parameters:** number width, number height<br>
|
||||||
|
**returns:** self<br>
|
||||||
Reference in New Issue
Block a user