Back

addMenu

JS Py
Hello World
Content:
- Properties
- Methods

Adds a pop-up menu into your components.

men = ui.addMenu( parent, list, options, width, height ) → Object: Menu Component

These are examples on how you can format your list.

Basic list
var lst = [ 'Item 1', 'Item 2', 'Item 3' ];


List with icons
var lst = ['favorite : Favorites', 'person : Account', 'delete : Trash Bin'];


List with group title
var lst = [' : This is a label', 'Item 1', 'Item 2', 'Item 3'];

Properties

These are the setter and getter properties for the addMenu Component.

absHeight
absLeft
absTop
absWidth
backColor
backImage
border
borderColor
borderStyle
cornerRadius
disabled
fontFile
height
isVisible
itemPadding
left
list
margins
opacity
options
padding
parent
position
rotation
textColor
textSize
top
type
visibility
width

Example - Basic menu

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

        // Adds a button control to the layout
        this.btn = ui.addButton(this.main, "Show Menu", "Primary")
        this.btn.setOnTouch( this.onTouch )

        // Menu items to display in the popup
        var items = ["Item 1", "Item 2", "Item 3"]

        // Adds a menu passing the button control as anchor
        this.menu = ui.addMenu(this.btn, items)

        // Add a callback handler when a menu is touched
        this.menu.setOnTouch( this.menuTouch )
    }

    onTouch()
    {
        // show the menu
        this.menu.show()
    }

    menuTouch( item )
    {
        ui.showPopup( item )
    }
}
from hybrid import ui

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

    # Adds a button control to the layout
    btn = ui.addButton(main, "Show Menu", "Primary")
    btn.setOnTouch(onTouch)

    # Menu items to display in the popup
    items = ["Item 1", "Item 2", "Item 3"]

    # Adds a menu passing the button control as anchor
    menu = ui.addMenu(btn, items)

    # Add a callback handler when a menu is touched
    menu.setOnTouch(menuTouch)

def onTouch(event):
    # show the menu
    menu.show()

def menuTouch(item, icon, index):
    ui.showPopup(item)
Copy All       Run      

Example - Changing anchor component

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

        // Add a first button control to the layout
        this.btn1 = ui.addButton(this.main, "Button 1", "Primary")
        this.btn1.setOnTouch( this.onTouch1 )

        // Add a second button control to the layout
        this.btn2 = ui.addButton(this.main, "Button 2", "Secondary")
        this.btn2.setOnTouch( this.onTouch2 )

        // Menu items to display the menu popup
        var items = ["Item 1", "Item 2", "Item 3"]

        // Adds a menu without anchor component
        this.menu = ui.addMenu(null, items)

        // Add a callback handler when a menu is touched
        this.menu.setOnTouch( this.menuTouch )
    }

    onTouch1()
    {
        // Show the menu on button 1
        this.menu.show( this.btn1 )
    }

    onTouch2()
    {
        // Show the menu on button 2
        this.menu.show( this.btn2 )
    }

    menuTouch( item )
    {
        ui.showPopup( item )
    }
}
from hybrid import ui

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

    # Add a first button control to the layout
    btn1 = ui.addButton(main, "Button 1", "Primary")
    btn1.setOnTouch(onTouch1)

    # Add a second button control to the layout
    btn2 = ui.addButton(main, "Button 2", "Secondary")
    btn2.setOnTouch(onTouch2)

    # Menu items to display the menu popup
    items = ["Item 1", "Item 2", "Item 3"]

    # Adds a menu without anchor component
    menu = ui.addMenu(None, items)

    # Add a callback handler when a menu is touched
    menu.setOnTouch(menuTouch)

def onTouch1(event):
    # Show the menu on button 1
    menu.show(btn1)

def onTouch2(event):
    # Show the menu on button 2
    menu.show(btn2)

def menuTouch(item, icon, index):
    ui.showPopup(item)
Copy All       Run      

Example - With icons and disabled items

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

        // Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Show Menu", "Primary")
        this.btn.setOnTouch( this.onTouch )

        // List items with icons
        var items = ["person:Item 1", "delete:Item 2", "favorite:Item 3"]

        // Add a menu passing the btn as anchor component
        this.menu = ui.addMenu(this.btn, items, "Icons,Primary,Dense")

        // Disable the second menu item
        this.menu.setEnabled(1, false)

        // Add a callback handler when a menu is touched
        this.menu.setOnTouch( this.menuTouch )
    }

    onTouch()
    {
        // show the menu
        this.menu.show()
    }

    menuTouch( item )
    {
        // display the selected item
        ui.showPopup( item )
    }
}
from hybrid import ui

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

    # Add a button control to the main layout
    btn = ui.addButton(main, "Show Menu", "Primary")
    btn.setOnTouch(onTouch)

    # List items with icons
    items = ["person:Item 1", "delete:Item 2", "favorite:Item 3"]

    # Add a menu passing the btn as anchor component
    menu = ui.addMenu(btn, items, "Icons,Primary,Dense")

    # Disable the second menu item
    menu.setEnabled(1, False)

    # Add a callback handler when a menu is touched
    menu.setOnTouch(menuTouch)

def onTouch(event):
    # show the menu
    menu.show()

def menuTouch(item, icon, index):
    # display the selected item
    ui.showPopup(item)
Copy All       Run      

Example - Anchor position on mouse

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

        // Add a text control to the layout
        this.txt = ui.addText(this.main, "Right click anywhere on the screen.")

        // List items with icons
        var items = ["person:Item 1", "delete:Item 2", "favorite:Item 3"]

        // Add menu passing the btn as anchor component
        this.menu = ui.addMenu(null, items, "Icons,Dense")

        // Add a callback handler when a menu is touched
        this.menu.setOnTouch( this.menuTouch )
    }

    onMenu( pos )
    {
        // show the menu on the position of the mouse
        this.menu.show(pos.x, pos.y)
    }

    menuTouch( item )
    {
        // display the selected item
        ui.showPopup( item )
    }
}
from hybrid import ui

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

    # Add a text control to the layout
    txt = ui.addText(main, "Right click anywhere on the screen.")

    # List items with icons
    items = ["person:Item 1", "delete:Item 2", "favorite:Item 3"]

    # Add menu passing the btn as anchor component
    menu = ui.addMenu(None, items, "Icons,Dense")

    # Add a callback handler when a menu is touched
    menu.setOnTouch(menuTouch)

def onMenu(pos):
    # show the menu on the position of the mouse
    menu.show(pos.x, pos.y)

def menuTouch(item, icon, index):
    # display the selected item
    ui.showPopup(item)
Copy All       Run      

Methods

The following methods are available on the Menu object:

addItem( name, index )
animate( anim, duration )
bringForward( zIndex )
destroy()
getEnabled( index ) → Boolean
getEnabledByName( name ) → Boolean
getPosition( options ) → Object
gone()
hide()
popItem()
removeItemByIndex( index )
removeItemByName( name )
sendBackward( zIndex )
setAutoFocus( bool )
setBorder( width, clr, style )
setCornerRadius( tl, tr, bl, br, mode )
setEnabled( index, value )
setEnabledByName( name, value )
setList( list )
setMargins( left, top, right, bottom, mode )
setOnContextMenu( callback )
setOnTouch( callback )
setPadding( left, top, right, bottom, mode )
setPosition( left, top )
setScale( x, y )
setSize( width, height )
shiftItem()
show( parent )
Boolean: Value can be `true` or `false`
Boolean: Values can be `true` or `false`. `false` to disable.
Boolean: Values can be `true` or `false`. `false` to disable an item.
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 at 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 item.
Number: The index of the item to remove.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Top-Left border radius in pixels.
Number: Top-Right border radius in pixels.
Number: Bottom-Left border radius in pixels.
Number: Bottom-Right border radius in pixels.
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: The position of the menu from the left of the parent or anchor component. The unit is in pixels.
Number: The position of the menu from the top of the parent or anchor component. The unit is in pixels.
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 width. [0-1]
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: comma “,” separated: “Color: `Primary` `Secondary` `Error`
List: `Dense`
Icons: `Icon`”
String: “The 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 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 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 corresping item the menu.”
String: “`px` or `%`”
String: “The size thickness mode. Can be `px`”
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 relative path to the font-family use.
String: Sets or returns the options of the control.
String: Sets or returns the color of the text.
String: Returns the type of the control.
String: Sets or returns the visibility of the control.
Object: The component where to anchor the Menu.
Object: The pointer event object.
Object: The component where to anchor the menu. It can be a `Button` or an `Image`.
Object: Returns the parent layout control.
Object: Returns the position of the control. The returned object has left top right and bottom props.
List: A list of items to be shown in the pop-up menu. You can also pass a comma separated string. For menu with icon the format is `icon:title`
`Add a `colon` before an item to display it as the label text.
List: The list items to show.
List: Sets or returns the padding of each menu item. See also setItemPadding method.
List: Sets or returns the items in the menu. You can also pass 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( event )
function( item, icon, index )
men.addItem
Adds an item in the menu list
men.animate
Animate the component
men.bringForward
Bring this component forward by a given z-index
men.destroy
Destroy the component
men.getEnabled
Get the enabled state of an item the menu popup
men.getEnabledByName
Get the enabled state of an item in the menu popup
men.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom
men.gone
Destroy the component
men.hide
Hide the pop-up menu
men.popItem
Removes the last item
men.removeItemByIndex
Removes an item in the menu items list by its index
men.removeItemByName
Removes an item in the menu items list by its name
men.sendBackward
Bring this component backward by a given z-index
men.setAutoFocus
Sets the autofocus value of the menu items
men.setBorder
Sets the border line for the component container
men.setCornerRadius
Sets the corner radius of the component
men.setEnabled
Enable or disable an item in the menu popup
men.setEnabledByName
Enable or disable an item in the menu popup by its name
men.setList
Updates the list items on the menu
men.setMargins
Sets the margin of the component
men.setOnContextMenu
Adds a callback function on right click
men.setOnTouch
Adds a callback handler when the menu is touch
men.setPadding
Sets the padding component container
men.setPosition
Set the position of the menu from the left and top of the anchor component
men.setScale
Sets the x and y scaling of the component
men.setSize
Sets the size of the component
men.shiftItem
Removes the first item
men.show
Show the menu pop-up
If you passed a parent on initialization, then the menu si anchored on that component