API Documentation

Documentation for developing SailfishOS applications

PushUpMenu QML Type

Adds a push-up menu to a flickable Silica view More...

Import Statement: import Sailfish.Silica 1.0

List of all members, including inherited members

Properties

active : bool
background : Component
backgroundColor : color
bottomMargin : real
busy : bool
flickable : Item
highlightColor : color
quickSelect : bool
spacing : real
topMargin : real

Methods

cancelBounceBack()
close(bool immediate)

Detailed Description

A PushUpMenu provides global actions for a SilicaFlickable, SilicaListView, or SilicaGridView. The menu is positioned at the end of the content in the view and is accessed by dragging the view past the end of the content. The menu items are activated by either:

dragging the view up to highlight a menu item and releasing to activate
dragging or flicking to expose the entire menu, and tapping a menu item to activate

A PushUpMenu is populated with options by declaring MenuItem objects as children of the PushUpMenu. It can also include MenuLabel children to display non-interactive labels.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 ApplicationWindow {
     initialPage: Page {
         SilicaListView {
             PushUpMenu {
                 MenuItem {
                     text: "Option 1"
                     onClicked: console.log("Clicked option 1")
                 }
                 MenuItem {
                     text: "Option 2"
                     onClicked: console.log("Clicked option 2")
                 }
                 MenuLabel { text: "Informational label" }
             }

             anchors.fill: parent
             header: PageHeader { title: "Header" }
             model: 100
             delegate: ListItem {
                 Label {
                     text: "Item " + model.index
                     anchors.centerIn: parent
                 }
             }
         }
     }
 }

Note that a SilicaFlickable, SilicaListView, or SilicaGridView is required to use a PushUpMenu. A menu can easily be added to any page by introducing a SilicaFlickable:

 // Without a PushUpMenu
 Page {
     Column {
         width: parent.width

         PageHeader {}
         Slider { width: parent.width }
     }
 }

 // With a PushUpMenu
 Page {
     SilicaFlickable {
         anchors.fill: parent
         contentHeight: column.height

         PushUpMenu {
             MenuItem {
                 text: "Option 1"
                 onClicked: console.log("Clicked option 1")
             }
         }

         Column {
             id: column
             width: parent.width

             PageHeader {}
             Slider { width: parent.width }
         }
     }
 }

The background and colors of a PushUpMenu can be customized by changing the background and backgroundColor. The sizes of the margins and menu item spacing are also customizable. The sizes are applied as follows:

PullDownMenu and PushUpMenu can be used together to provide menus at both the beginning and end of a view.

See also MenuItem, PullDownMenu, and ContextMenu.

Property Documentation

active : bool

A PushUpMenu is active if it is partially or completely visible.

background : Component

This property holds the component to use to draw the background of the menu. If a custom background is set, it is recommended that it excludes the spacing at the bottom of the menu. For example:

 PushUpMenu {
     background: Rectangle {
         anchors {
             fill: parent
             topMargin: parent.spacing
         }
         opacity: Theme.highlightBackgroundOpacity
         color: Theme.highlightColor
     }
 }

backgroundColor : color

This property controls the background color of the menu. It is painted with a gradient applied.

See also highlightColor.

bottomMargin : real

This property holds the margin between the last menu item and the bottom of the menu.

The default value is Theme.itemSizeSmall.

See also topMargin and spacing.

busy : bool

Pulses the menu indicator to indicate that an operation is in progress. The menu can still be accessed while busy is true.

flickable : Item

Specifies the SilicaFlickable, SilicaListView, or SilicaGridView to which the PushUpMenu will be added.

If flickable is not supplied then the menu will be added to the nearest ancestor Flickable.

highlightColor : color

This property controls the color of the menu indicator and menu highlight bar.

See also backgroundColor.

quickSelect : bool

When true, quickSelect prevents locking the menu open when the end is reached in menus with a single option.

This allows the user to drag the menu all the way open and release to select the menu item. This is most useful in alarm type dialogs, where the menu has a single option which the user will likely want to react to very quickly, or without seeing/hearing the menu interaction at all.

spacing : real

This property holds the number of pixels to reserve between the view content and the menu indicator.

The default value is 0.

See also topMargin and bottomMargin.

topMargin : real

This property holds the margin between the menu indicator and the first menu item.

The default value takes into account the presence of any MenuLabel at the beginning of the menu. If the first child in the menu is a MenuLabel, this value is 0, otherwise it is the height of a MenuLabel. This provides a similar menu opening feel for menus with and without a MenuLabel.

See also bottomMargin and spacing.

Method Documentation

cancelBounceBack()

Normally after a menu item is selected, the PushUpMenu will perform a short 'bounce-back' animation to return to the closed state. However, this may interfere with the action desired as a result of menu selection. To prevent the bounce-back animation after item selection, invoke cancelBounceBack() from the onClicked handler of the relevant menu item. The bounce-back animation will be re-enabled the next time the menu is opened.

See also close.

close(bool immediate)

Closes the menu.

By default, the menu closing operation is animated by a short 'bounce-back' animation. However, if immediate is true, the animation will be omitted.

See also cancelBounceBack.