QML Menu Element

Menu component for selecting a menu item from a list of menu items. More...

Inherits Popup

This element was introduced in qt-components 4.7.

List of all members, including inherited members

Properties

content : Item
platformStyle : Style
status : int
title : list<Item>
visualParent : QDeclarativeItem*

Methods

close
open

Detailed Description

This is a menu component for selecting a menu item from a list of menu items. Each menu item displays some text and can be associated with a custom action that is performed on the clicked signal.

The menu items are arranged in a layout via the MenuLayout element. Note that this layout and its implementation can vary depending on the UI guidelines of the platform.

 // Create a menu with different menu items.
 Menu {
     id: myMenu
     // visualParent is needed to specify the grayed out area.
     visualParent: pageStack
     MenuLayout {
         MenuItem {text: "Red"; onClicked: { colorRect.color = "darkred" } }
         MenuItem {text: "Green"; onClicked: { colorRect.color = "darkgreen" }}
         MenuItem {text: "Blue"; onClicked: { colorRect.color = "darkblue" }}
     }
 }

The visual parent property can be used to specify which area of the screen is grayed out while the menu is opened. If no visual parent is set then it is determined automatically and falls back to the root item.

Usually the menu is opened by clicking a ToolIcon. In order to close the menu on a subsequent click the following code is required:

 // Toggle menu when clicking the ToolIcon twice.
 ToolIcon { iconId: theme.inverted ? "icon-m-toolbar-view-menu-white" : "icon-m-toolbar-view-menu";
     onClicked:  (myMenu.status == DialogStatus.Closed)
                 ? myMenu.open()
                 : myMenu.close() }

Also note that you need to take care of closing the menu automatically in some situations:

 // Closes the menu when changing the page in the page stack.
 ToolIcon { iconId: theme.inverted ? "icon-m-toolbar-back-white" : "icon-m-toolbar-back";
     onClicked: { myMenu.close(); pageStack.pop(); } }

The Menu shares most of its API with the ContextMenu component.

Common API

 default property alias content: contentField.children

 // Common API inherited from Popup:
 function open()
 function close()

 property QDeclarativeItem* visualParent
 property int status
 property alias title: titleBar.children

 // platformStyle API
 property Style platformStyle
 property Style style // Deprecated

See also MenuItem.

Property Documentation

content : Item

The content to be placed inside the menu.

platformStyle : Style

Property default is MenuStyle{}.

Property for styling the component.

See also MenuStyle.

status : int

Returns the current status of the menu during its life cycle. Possible values are: DialogStatus.Opening, DialogStatus.Opened, DialogStatus.Closing and DialogStatus.Closed.

title : list<Item>

The items that provide the title information.

visualParent : QDeclarativeItem*

Property default is the root element.

The visual parent marks the element that occupies the area which is supposed to be grayed out while the menu is open.

The visual parent is an optional property which takes an Item as a type. The Item provided indicates the area on the screen that is supposed to get grayed out and become inaccessible. By default that area is the whole screen (except for the statusbar)

Method Documentation

Menu::close ()

Closes the menu and changes the status to DialogStatus.Closing for the animation phase. Once the menu is opened the status is changed to DialogStatus.Closed.

Menu::open ()

Opens the menu and changes the status to DialogStatus.Opening for the animation phase. Once the menu is opened the status is changed to DialogStatus.Open.

Contents