ContextMenuArea

Use the non-visual ContextMenuArea element to declare an area where the user can show a context menu.

The context menu is shown if the user right-clicks on the area covered by the ContextMenuArea element, or if the user presses the “Menu” key on their keyboard while a FocusScope within the ContextMenuArea has focus. On Android, the menu is shown with a long press. Call the show() function on the ContextMenuArea element to programmatically show the context menu.

One of the children of the ContextMenuArea must be a Menu element, which defines the menu to be shown. There can be at most one Menu child, all other children must be of a different type and will be shown as regular visual children. Define the structure of the menu by placing MenuItem or Menu elements inside that Menu.

Function

show(Point)

Call this function to programmatically show the context menu at the given position relative to the ContextMenuArea element.

close()

Close the context menu if it’s currently open.

Menu

Place the Menu element in a MenuBar, a ContextMenuArea, or within another Menu. Use MenuItem children of individual menu items, Menu children to create sub-menus, and MenuSeparator to create separators.

Properties of Menu

title

string default: ""

This is the label of the menu as written in the menu bar or in the parent menu.

MenuItem

A MenuItem represents a single menu entry. It’s must be a child of a Menu element.

Properties of MenuItem

title

string default: ""

The title shown for this menu item.

Callbacks of MenuItem

activated()

Invoked when the menu entry is activated.

MenuSeparator

A MenuSeparator represents a separator in a menu. It cannot have children, and doesn’t have properties or callbacks. MenuSeparator at the beginning or end of a menu will not be visible. Consecutive MenuSeparators will be merged into one.

Example

export component Example {
    ContextMenuArea {
        Menu {
            MenuItem {
                title: @tr("Cut");
                activated => { debug("Cut"); }
            }
            MenuItem {
                title: @tr("Copy");
                activated => { debug("Copy"); }
            }
            MenuItem {
                title: @tr("Paste");
                activated => { debug("Paste"); }
            }
            MenuSeparator {}
            Menu {
                title: @tr("Find");
                MenuItem {
                    title: @tr("Find Next");
                }
                MenuItem {
                    title: @tr("Find Previous");
                }
            }
        }
    }
}

slint