A dropdown, also known as a spinner or picker, is a user interface element that presents a list of options in a drop-down menu.
Here are the available methods for Dropdown Component.
Examples
Example - Basic
class Main extends App
{
onStart()
{
this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
var items = ["Item 1", "Item 2", "Item 3"]
this.dpd = ui.addDropdown(this.main, items)
this.dpd.setOnChange( this.onChange )
}
onChange(text, index)
{
ui.showPopup( "Value is " + text )
}
}
from hybrid import ui
def OnStart():
main = ui.addLayout("main", "Linear", "VCenter,FillXY")
items = ["Item 1", "Item 2", "Item 3"]
dpd = ui.addDropdown(main, items)
dpd.setOnChange(onChange)
def onChange(text, index):
ui.showPopup("Value is " + text)
Example - Custom styles
class Main extends App
{
onStart()
{
this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
var items = ["Item 1", "Item 2", "Item 3"]
this.dpd = ui.addDropdown( this.main, items, "Outlined,Primary" )
this.dpd.label = "Choose and item"
this.dpd.cornerRadius = 16
this.dpd.textSize = 18
this.dpd.setOnChange( this.onChange )
}
onChange(text, index)
{
ui.showPopup( "Value is " + text )
}
}
from hybrid import ui
def OnStart():
main = ui.addLayout("main", "Linear", "VCenter,FillXY")
items = ["Item 1", "Item 2", "Item 3"]
dpd = ui.addDropdown(main, items, "Outlined,Primary")
dpd.label = "Choose an item"
dpd.cornerRadius = 16
dpd.textSize = 18
dpd.setOnChange(onChange)
def onChange(text, index):
ui.showPopup("Value is " + text)
Properties
The following properties are available on the Dropdown object:
Methods
The following methods are available on the Dropdown object:
Boolean: Values can be `true` `false`.
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
Number: The index in which to insert the menu item.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The index of the item.
Number: The index of corresponding item.
Number: The index of the menu item to remove.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Top-left corner radius.
Number: Top-right corner radius.
Number: Bottom-left corner radius.
Number: Bottom-right corner radius.
Number: The index of the item to update.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the parent height. [0-1]
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
String: “A comma separated options.
Theme Colors: `Primary`”, “ `Secondary`”, “ `Default`
Variants: `Contained`”, “ `Outlined`”, “ `Text`
Sizes: `Small`”, “ `Medium`”, “ `Large`
Orientation: `Horizontal`”, “ `Vertical`
Util: `NoElevation`”
String: “The name of the menu.”
String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”
String: “The name of the corresponding menu item.”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “The name of the menu item.”
String: “Border color in hexadecimal format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit. Values are `px` `rem` or `%`.”
String: “The name of the item.”
String: “The new item text.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
Object: The layout where to add the dropdown.
Object: The pointer event object.
Object: The position of the touch event.
List: The list items to show.
List: The list of new items.
function()
function(
text ,
index ,
pos
)
dpd.absHeight
Returns the absolute height of the control in pixels.
dpd.absLeft
Returns the absolute distance of the control from the left in pixels.
dpd.absTop
Returns the absolute distance of the control from the top in pixels.
dpd.absWidth
Returns the absolute width of the control in pixels.
dpd.addItem
Add or insert a menu item in the dropdown list.
dpd.animate
Animate the component.
dpd.backColor
A hexadecimal color of the form #rrggbb
dpd.backImage
The path to your image file.
dpd.border
Sets or returns the border thickness in pixels.
dpd.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
dpd.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
dpd.bringForward
Bring this component forward by a given z-index.
dpd.color
Sets or returns the theme color. Values can be Default Primary or Secondary
dpd.cornerRadius
Sets or returns the corner radius in pixels.
dpd.destroy
Destroy the component.
dpd.disabled
Sets or returns the disabled state of the control.
dpd.el
Returns the html container element for the control.
dpd.elStyle
Sets the style of the html container element.
dpd.fontFile
Sets or returns the relative path to the font-family use.
dpd.getEnabled
Get the enabled state of an item in the dropdown menu.
dpd.getEnabledByName
Get the enabled state of a menu item by its name.
dpd.getItemByIndex
Returns a dropdown item by its corresponding index.
dpd.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
dpd.gone
Destroy the component.
dpd.height
Sets or returns the height of the control as a fraction of the parent control.
dpd.hide
Hide the component.
dpd.icon
Sets or returns the dropdown material icon font.
dpd.isVisible
Returns whether the control is visible or not.
dpd.label
Sets or returns the default label of the dropdown.
dpd.left
Returns the distance of the control from the left.
dpd.list
Sets or returns the dropdown list. You can also passed a comma separated string.
dpd.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
dpd.opacity
Sets or returns the opacity of the control.
dpd.options
Sets or returns the options of the control.
dpd.orientation
Sets or returns the orientation of the dropdown buttongroup. Values can be horizontal or vertical
dpd.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
dpd.parent
Returns the parent layout control.
dpd.popItem
Removes the last item in the dropdown menu. This will return the item being removed.
dpd.position
Returns the position of the control. The returned object has left top right and bottom props.
dpd.removeItemByIndex
Removes a menu item in the dropdown by its index.
dpd.removeItemByName
Removes a menu item in the dropdown by its name.
dpd.rotation
Sets or returns the angle of rotation in degrees.
dpd.sendBackward
Bring this component backward by a given z-index.
dpd.setBorder
Sets the border line for the component container.
dpd.setCornerRadius
Sets the corner radius of the dropdown.
dpd.setEnabled
Enable or disable an item in the dropdown.
dpd.setEnabledByName
Enable or disable an item in the dropdown.
dpd.setItemByIndex
Updates the text of the corresponding item in the dropdown.
dpd.setList
Sets the list items on the dropdown.
dpd.setMargins
Sets the margin of the component.
dpd.setOnChange
Adds a callback function on change event.
dpd.setOnClose
Adds a callback function on close event.
dpd.setOnContextMenu
Adds a callback function on right click.
dpd.setOnOpen
Adds a callback function on close event.
dpd.setOnTouch
Adds a callback handler when the component is touch.
dpd.setPadding
Sets the padding of the component's container.
dpd.setPosition
Sets the position of the component relative to its parent dimensions.
dpd.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
dpd.setSize
Sets the size of the component.
dpd.shiftItem
Removes the first item in the dropdown menu. This will return the item being removed.
dpd.show
Show the component.
dpd.sizeVariant
Sets or returns the size variant of the dropdown button. Values can be Small or Medium or Large
dpd.textColor
Sets or returns the color of the text.
dpd.textSize
Sets or returns the size of the text within the control.
dpd.top
Returns the distance of the control from the top.
dpd.type
Returns the type of the control.
dpd.value
Sets or returns the value of the Dropdown. If you pass a number it will be treated as the index of the corresponding item in the choices.
dpd.variant
Sets or returns the variant of the dropdown button. Values can be Contained or Outlined or Text
dpd.visibility
Sets or returns the visibility of the control.
dpd.width
Sets or returns the width of the control as a fraction of the parent control.