Updated Dropdown (markdown)

Robert Jelic
2022-05-02 21:02:48 +02:00
parent bb867c1fe2
commit 5a74473ffd

@@ -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>