class Main extends App
{
    onStart()
    {
        // Create a fullscreen linear layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Initialize items to show in the dropdown
        var items = ["Item 1", "Item 2", "Item 3"]

        // Add Dropdown control to the main layout.
        this.dpd = ui.addDropdown(this.main, items)

        // Add a callback handler for `onChange` event on the Dropdown control
        this.dpd.setOnChange( this.onChange )
    }

    onChange(text, index)
    {
        ui.showPopup( "Value is " + text )
    }
}

from hybrid import ui

def OnStart():
    # Create a fullscreen linear layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Initialize items to show in the dropdown
    items = ["Item 1", "Item 2", "Item 3"]

    # Add Dropdown control to the main layout.
    dpd = ui.addDropdown(main, items)

    # Add a callback handler for `onChange` event on the Dropdown control
    dpd.setOnChange(onChange)

def onChange(text, index):
    ui.showPopup("Value is " + text)

Copy All Run

Example - Custom styles

class Main extends App
{
    onStart()
    {
        // Create a fullscreen linear layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Initialize dropdown items
        var items = ["Item 1", "Item 2", "Item 3"]

        // Add a Dropdown control to the main layout
        // and pass `Outlined` and `Primary` options for styling
        this.dpd = ui.addDropdown( this.main, items, "Outlined,Primary" )

        // Set the label property of the Dropdown
        this.dpd.label = "Choose and item"

        // Set the corner radius to 16px
        this.dpd.cornerRadius = 16

        // Set the text size to 18
        this.dpd.textSize = 18

        // Add a callback handler for `onChange` event of the Dropdown control
        this.dpd.setOnChange( this.onChange )
    }

    onChange(text, index)
    {
        ui.showPopup( "Value is " + text )
    }
}

from hybrid import ui

def OnStart():
    # Create a fullscreen linear layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Initialize dropdown items
    items = ["Item 1", "Item 2", "Item 3"]

    # Add a Dropdown control to the main layout
    # and pass `Outlined` and `Primary` options for styling
    dpd = ui.addDropdown(main, items, "Outlined,Primary")

    # Set the label property of the Dropdown
    dpd.label = "Choose an item"

    # Set the corner radius to 16px
    dpd.cornerRadius = 16

    # Set the text size to 18
    dpd.textSize = 18

    # Add a callback handler for `onChange` event of the Dropdown control
    dpd.setOnChange(onChange)

def onChange(text, index):
    ui.showPopup("Value is " + text)

Copy All Run

Methods

The following methods are available on the Dropdown object:

addItem( name, index )

animate( anim, duration )

bringForward( zIndex )

destroy()

getEnabled( index ) → Boolean

getEnabledByName( name ) → Boolean

getItemByIndex( index ) → String

getPosition( options ) → Object

gone()

hide()

popItem()

removeItemByIndex( index )

removeItemByName( name )

sendBackward( zIndex )

setBorder( width, clr, style )

setCornerRadius( tl, tr, bl, br, mode )

setEnabled( index, value )

setEnabledByName( name, value )

setItemByIndex( item, index )

setList( val )

setMargins( left, top, right, bottom, mode )

setOnChange( callback )

setOnClose( callback )

setOnContextMenu( callback )

setOnTouch( callback )

setPadding( left, top, right, bottom, mode )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height )

shiftItem()

show()

Boolean: Values can be `true` `false`.

Boolean: Sets or returns the disabled state of the control.

Boolean: Returns whether the control is visible or not.

Number: Fraction of the screen width. [0-1]

Number: Fraction of the screen 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: 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: Fraction of the parent width.

Number: Fraction of the parent height.

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: 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.

Number: Fraction of the parent height. [0-1]

Number: Returns the absolute height of the control in pixels.

Number: Returns the absolute distance of the control from the left in pixels.

Number: Returns the absolute distance of the control from the top in pixels.

Number: Returns the absolute width of the control in pixels.

Number: Sets or returns the border thickness in pixels.

Number: Sets or returns the corner radius in pixels.

Number: Sets or returns the height of the control as a fraction of the parent control.

Number: Returns the distance of the control from the left.

Number: Sets or returns the opacity of the control.

Number: Sets or returns the angle of rotation in degrees.

Number: Sets or returns the size of the text within the control.

Number: Returns the distance of the control from the top.

Number: Sets or returns the width of the control as a fraction of the parent control.

String: “A comma separated Dropdown options. Can be
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 form `#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: “`px` or `%`”

String: “The size thickness mode. Can be `px`”

String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”

String: A hexadecimal color of the form #rrggbb

String: The path to your image file.

String: Sets or returns the border color. Color is in hexadecimal form #rrggbb

String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

String: Sets or returns the theme color. Values can be Default Primary or Secondary

String: Sets or returns the relative path to the font-family use.

String: Sets or returns the dropdown material icon font.

String: Sets or returns the default label of the dropdown.

String: Sets or returns the options of the control.

String: Sets or returns the orientation of the dropdown buttongroup. Values can be horizontal or vertical

String: Sets or returns the size variant of the dropdown button. Values can be Small or Medium or Large

String: Sets or returns the color of the text.

String: Returns the type of the control.

String: 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.

String: Sets or returns the variant of the dropdown button. Values can be Contained or Outlined or Text

String: Sets or returns the visibility of the control.

Object: The layout where to add the dropdown.

Object: item text.

Object: The pointer event object.

Object: The click event object.

Object: Returns the parent layout control.

Object: Returns the position of the control. The returned object has left top right and bottom props.

List: The list items to show.

List: The list of new items t display.

List: Sets or returns the dropdown list. You can also passed a comma separated string.

List: 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.

List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

function( The, index )

function()

function( event )

dpd.addItem
Add or insert a menu item in the dropdown list

dpd.animate
Animate the component

dpd.bringForward
Bring this component forward by a given z-index

dpd.destroy
Destroy the component

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.hide
Hide the component

dpd.popItem
Removes the last item in the dropdown menu

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.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.setOnTouch
Adds a callback handler when the component is touch

dpd.setPadding
Sets the padding component 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

dpd.setSize
Sets the size of the component

dpd.shiftItem
Removes the first item in the dropdown menu

dpd.show
Show the component