Back

addMenu

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

A menu is a list of options or actions presented to the user as a popup.

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

Here are the available methods for Menu Component.

Examples

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.childSpacing = "Even";

        // 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 / touch

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.\n(Long press if your on mobile phone)", "Multiline")

        // 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 )
    }
}
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.\n(Long press if your on mobile phone)", "Multiline")

        # List items with icons
        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 )
Copy All       Run      

Properties

The following properties are available on the Menu object:

itemPadding → List
list → List

Methods

The following methods are available on the Menu object:

addItem( name, index )
getEnabled( index ) → Boolean
getEnabledByName( name ) → Boolean
hide()
popItem()
removeItemByIndex( index )
removeItemByName( name )
setAutoFocus( bool )
setEnabled( index, value )
setEnabledByName( name, value )
setItemPadding( left, top, right, bottom, mode )
setList( list )
setOnTouch( callback )
setPosition( left, top )
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.
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
Number: The index at which to add the item.
Number: The index of the item.
Number: The index of the item to remove.
Number: Left padding of the menu item.
Number: Top padding of the menu item.
Number: Right padding of the menu item.
Number: Bottom padding of the menu item.
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.
String: “A comma separated options.
Theme Color: `Primary`”, “ `Secondary`”, “ `Error`
Utils: `Dense`”, “ `Icon`”
String: “The new item to be added.”
String: “The name of the item.”
String: “The name of the item to remove.”
String: “The name of the corresping item the menu.”
String: “Unit of measurement. Can be `rem`”, “ `px`”, “ `%`”, “ or `v` for viewport.”
Object: The component where to anchor the Menu.
Object: The component where to anchor the menu. It can be a `Button` or an `Image`.
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
Add a `colon` before an item to display it as the label text.
List: The list items to show.
function( item , icon , index )
men.addItem
Adds an item in the menu list.
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.hide
Hide the pop-up menu.
men.itemPadding
Sets or returns the padding of each menu item. See also setItemPadding method.
men.list
Sets or returns the items in the menu. You can also pass a comma separated string.
men.popItem
Removes the last item. This will return the item being removed.
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.setAutoFocus
Sets the autofocus value of the menu items.
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.setItemPadding
Sets the padding of the menu item. See itemPadding property for equivalent setter/getter property.
men.setList
Updates the list items on the menu.
men.setOnTouch
Adds a callback handler when the menu is touch.
men.setPosition
Set the position of the menu from the left and top of the anchor component.
men.shiftItem
Removes the first item. This will return the item being removed.
men.show
Show the menu pop-up.
If you passed a parent on initialization, then the menu si anchored on that component.