Back

addSelect

JS Py
Hello World
Content:
- Examples
- Properties
- Methods

Adds a Select Component to a given layout.

sel = ui.addSelect( parent, list?, options?, width?, height? ) → ui object: Select

Here are the methods available for the Select Component.

Examples

Example - Basic

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

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

        // Adds a select control to the main layout
        this.sel = ui.addSelect(this.main, items, "", 0.6)

        // Set the label text
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(text, index)
    {
        ui.showPopup("You choose " + text)
    }
}
from hybrid import ui
from native import app

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

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

    # Adds a select control to the main layout
    sel = ui.addSelect(main, items, "", 0.6)

    # Set the label text
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(text):
    ui.showPopup("You choose " + text)

app.add(Main())
Copy All       Run      

Example - Group title

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

        // Initialize the list items to show
        // The leading colon in each item will render it as group tile
        var items = [":Choices", "Item 1", "Item 2", "Item 3"]

        // Adds a select control to the main layout
        this.sel = ui.addSelect(this.main, items, "", 0.6)

        // Set the label text
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(text, index)
    {
        ui.showPopup("You choose " + text)
    }
}
from hybrid import ui
from native import app

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

    # Initialize the list items to show
    # The leading colon in each item will render it as group tile
    items = [":Choices", "Item 1", "Item 2", "Item 3"]

    # Adds a select control to the main layout
    sel = ui.addSelect(main, items, "", 0.6)

    # Set the label text
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(text):
    ui.showPopup("You choose " + text)

app.add(Main())
Copy All       Run      

Example - Multiple selection

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

        // Initialize list items to show
        var items = ["Item 1", "Item 2", "Item 3"]

        // Adds a select control to the main layout
        // Passing `Multiple` option will allow more than one selection
        this.sel = ui.addSelect(this.main, items, "Multiple", 0.6)
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(items, index)
    {
        ui.showPopup( "You choose " + items.join(", ") )
    }
}
from hybrid import ui
from native import app

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

    # Initialize list items to show
    items = ["Item 1", "Item 2", "Item 3"]

    # Adds a select control to the main layout
    # Passing `Multiple` option will allow more than one selection
    sel = ui.addSelect(main, items, "Multiple", 0.6)
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(items):
    ui.showPopup("You choose " + ", ".join(items))

app.add(Main())
Copy All       Run      

Example - Outlined and small

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

        // Initialize list items to show
        var items = ["Item 1", "Item 2", "Item 3"]

        // Adds a select control to the main layout
        // Passing `Outlined` option will add a border
        // Passing `Small` option will make the control smaller
        this.sel = ui.addSelect(this.main, items, "Outlined,Small,Secondary", 0.6)
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(item, index)
    {
        ui.showPopup( "You choose " + item )
    }
}
from hybrid import ui
from native import app

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

    # Initialize list items to show
    items = ["Item 1", "Item 2", "Item 3"]

    # Adds a select control to the main layout
    # Passing `Outlined` option will add a border
    # Passing `Small` option will make the control smaller
    sel = ui.addSelect(main, items, "Outlined,Small,Secondary", 0.6)
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(item):
    ui.showPopup("You choose " + item)

app.add(Main())
Copy All       Run      

Example - Radiogroup items

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

        // Initialize list items to show
        var items = ["Item 1", "Item 2", "Item 3"]

        // Adds a select control to the main layout
        // Passing `Radio` option will render the items as radiogroup
        this.sel = ui.addSelect(this.main, items, "Filled,Radio", 0.6)
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(item, index)
    {
        ui.showPopup( "You choose " + item )
    }
}
from hybrid import ui
from native import app

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

    # Initialize list items to show
    items = ["Item 1", "Item 2", "Item 3"]

    # Adds a select control to the main layout
    # Passing `Radio` option will render the items as radiogroup
    sel = ui.addSelect(main, items, "Filled,Radio", 0.6)
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(item):
    ui.showPopup("You choose " + item)

app.add(Main())
Copy All       Run      

Example - Grouped list items

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

        // Initialize list items to show with group tiles
        var items = [":Group 1", "Item 1", "Item 2", ":Group 2", "Another item 1", "Another item 2"]

        // Adds a select control to the main layout
        this.sel = ui.addSelect(this.main, items, "Filled", 0.6)
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(item, index)
    {
        ui.showPopup( "You choose " + item )
    }
}
from hybrid import ui
from native import app

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

    # Initialize list items to show with group tiles
    items = [":Group 1", "Item 1", "Item 2", ":Group 2", "Another item 1", "Another item 2"]

    # Adds a select control to the main layout
    sel = ui.addSelect(main, items, "Filled", 0.6)
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(item):
    ui.showPopup("You choose " + item)

app.add(Main())
Copy All       Run      

Example - Multiple radiogroup with titles

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

        // Initialize list items to show with group tiles
        var items = [":Group 1", "Item 1", "Item 2", ":Group 2", "Another item 1", "Another item 2"]

        // Adds a select control to the main layout
        this.sel = ui.addSelect(this.main, items, "Outlined,Radio,Multiple", 0.6)
        this.sel.label = "Select an item"

        // Add a callback handler when an item is selected
        this.sel.setOnChange( this.onChange )
    }

    onChange(items, index)
    {
        ui.showPopup( "You choose " + items.join(", ") )
    }
}
from hybrid import ui

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

    # Initialize list items to show with group tiles
    items = [":Group 1", "Item 1", "Item 2", ":Group 2", "Another item 1", "Another item 2"]

    # Adds a select control to the main layout
    sel = ui.addSelect(main, items, "Outlined,Radio,Multiple", 0.6)
    sel.label = "Select an item"

    # Add a callback handler when an item is selected
    sel.setOnChange(onChange)

def onChange(items):
    ui.show
Copy All       Run      

Properties

The following properties are available on the Select object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
cornerRadius → Number
disabled → Boolean
el → Object
elStyle → String
enabled → Boolean
fontFile → String
height → Number
iconColor → String
isVisible → Boolean
label → String
labelColor → String
labelSize → Number
left → Number
list → List
margins → List
maxHeight → Number
opacity → Number
options → String
padding → List
parent → Object
popupColor → String
position → Object
rotation → Number
sizeVariant → String
textColor → String
textSize → Number
top → Number
type → String
value → String
variant → String
visibility → String
width → Number

Methods

The following methods are available on the Select object:

addItem( item, index )
animate( anim, duration )
bringForward( zIndex )
destroy()
getEnabled( index ) → Boolean
getEnabledByName( name ) → Boolean
getItem( index ) → Object
getPosition( options ) → Object
gone()
hide()
popItem()
removeItemByIndex( index )
removeItemByName( name )
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setEnabled( index, value )
setEnabledByName( name, value )
setList( items )
setMargins( left?, top?, right?, bottom?, mode? )
setOnChange( callback )
setOnClose( callback )
setOnContextMenu( callback )
setOnOpen( callback )
setOnTouch( callback )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height, mode )
shifItem()
show()
Boolean: Values can be `true` or `false`.
Boolean: Value can be `true` or `false`
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
Number: The index in which to add the item.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The index of the corresponding item in the select menu.
Number: The index of the item.
Number: The index of the corresponding 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 border radius.
Number: Top-Right border radius.
Number: Bottom-Right border radius.
Number: Bottom-Left border radius.
Number: Can be `true` or `false`. You can also pass a `Boolean` to enable or disable the Select component.
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.
Sizes: `Small`”, “ `Medium`
Variant: `Filled`”, “ `Outlined`”, “ `Standard`
Margin: `Dense`”, “ `Normal`
Utils: `Required`”, “ `Multiple`”, “ `Radio`”, “ `Disabled`”, “ `AutoFocus`”, “ `FullWidth`”
String: “A new item to be added.”
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 menu item.”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “The name of the item to remove.”
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 of measurement. Values are `px` `rem` or `%`.”
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 parent layout where to add the control
Object: The pointer event object.
Object: The position of the touch event.
List: The list of items for the Select options
List: A comma separated string or array of options
function( value , index )
function( value )
function( event )
function()
function( text , index , pos )
sel.absHeight
Returns the absolute height of the control in pixels.
sel.absLeft
Returns the absolute distance of the control from the left in pixels.
sel.absTop
Returns the absolute distance of the control from the top in pixels.
sel.absWidth
Returns the absolute width of the control in pixels.
sel.addItem
Adds an item on the select component options list.
sel.animate
Animate the component.
sel.backColor
A hexadecimal color of the form #rrggbb
sel.backImage
The path to your image file.
sel.border
Sets or returns the border thickness in pixels.
sel.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
sel.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
sel.bringForward
Bring this component forward by a given z-index.
sel.cornerRadius
Sets or returns the corner radius in pixels.
sel.destroy
Destroy the component.
sel.disabled
Sets or returns the disabled state of the control.
sel.el
Returns the html container element for the control.
sel.elStyle
Sets the style of the html container element.
sel.enabled
Sets or returns a boolean value whether the component is enabled or disabled.
sel.fontFile
Sets or returns the relative path to the font-family use.
sel.getEnabled
Get the enabled state of an item in the select menu.
sel.getEnabledByName
Get the enabled state of an item in the menu popup.
sel.getItem
Returns the item at a given index.
sel.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
sel.gone
Destroy the component.
sel.height
Sets or returns the height of the control as a fraction of the parent control.
sel.hide
Hide the component.
sel.iconColor
Sets or returns the color of the icon in hexadecimal format #rrggbb
sel.isVisible
Returns whether the control is visible or not.
sel.label
Sets or returns the label text.
sel.labelColor
Sets or returns the color of the label text in hexadecimal format #rrggbb
sel.labelSize
Sets or returns the size of the label.
sel.left
Returns the distance of the control from the left.
sel.list
Sets or returns the list items. You can also pass a comma separated string of items.
sel.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.
sel.maxHeight
Sets or returns the maximum height of the popup container.
sel.opacity
Sets or returns the opacity of the control.
sel.options
Sets or returns the options of the control.
sel.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
sel.parent
Returns the parent layout control.
sel.popItem
Removes an item at the end of the list items. This will return the item being removed.
sel.popupColor
Sets or returns the color of the popup in hexadecimal format.
sel.position
Returns the position of the control. The returned object has left top right and bottom props.
sel.removeItemByIndex
Removes an item in the select component item list by its index.
sel.removeItemByName
Removes an item in the select component item list by its name.
sel.rotation
Sets or returns the angle of rotation in degrees.
sel.sendBackward
Bring this component backward by a given z-index.
sel.setBorder
Sets the border line for the component container.
sel.setCornerRadius
Sets the corner radius of the component.
sel.setEnabled
Enable or disable the select component.
sel.setEnabledByName
Enable or disable an item in the menu popup.
sel.setList
Sets the list items in the menu popup.
sel.setMargins
Sets the margin of the component.
sel.setOnChange
Sets a callback function when the value changes.
sel.setOnClose
Sets a callback function when the menu dialog is close.
sel.setOnContextMenu
Adds a callback function on right click.
sel.setOnOpen
Sets a callback function when the menu is open.
sel.setOnTouch
Adds a callback handler when an item is touch. This will be fired even if the value does not change.
sel.setPadding
Sets the padding of the component's container.
sel.setPosition
Sets the position of the component relative to its parent dimensions.
sel.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
sel.setSize
Sets the size of the component.
sel.shifItem
Removes an item at the beginning of the list items. This will return the item being removed.
sel.show
Show the component.
sel.sizeVariant
Sets or returns the size variant of the Select Component. Values can be Small or Medium
sel.textColor
Sets or returns the color of the text.
sel.textSize
Sets or returns the size of the text within the control.
sel.top
Returns the distance of the control from the top.
sel.type
Returns the type of the control.
sel.value
Sets or returns the value of the Select Component. For Select with Multiple options, the value is an array of string items. You can also pass the index of the selected item. Pass an array of indexes for multiple selection.
sel.variant
Sets or returns the variant of the Select Component. Values can be Standard Filled and Outlined
sel.visibility
Sets or returns the visibility of the control.
sel.width
Sets or returns the width of the control as a fraction of the parent control.