Popover

A popover allows an application to present additional content without changing the view. A popover has a fixed width and automatic height, depending on is contents. It can be closed by clicking anywhere outside of the popover area. More...

Inherited by ActionSelectionPopover.

Properties

Detailed Description

Example:

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem
import Ubuntu.Components.Popups 0.1

Rectangle {
    color: "grey"
    width: units.gu(80)
    height: units.gu(80)
    Component {
        id: popoverComponent

        Popover {
            id: popover
            Column {
                id: containerLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                }
                ListItem.Header { text: "Standard list items" }
                ListItem.Standard { text: "Do something" }
                ListItem.Standard { text: "Do something else" }
                ListItem.Header { text: "Buttons" }
                ListItem.SingleControl {
                    highlightWhenPressed: false
                    control: Button {
                        text: "Do nothing"
                        anchors {
                            fill: parent
                            margins: units.gu(1)
                        }
                    }
                }
                ListItem.SingleControl {
                    highlightWhenPressed: false
                    control: Button {
                        text: "Close"
                        anchors {
                            fill: parent
                            margins: units.gu(1)
                        }
                        onClicked: PopupUtils.close(popover)
                    }
                }
            }
        }
    }
    Button {
        id: popoverButton
        anchors.centerIn: parent
        text: "open"
        onClicked: PopupUtils.open(popoverComponent, popoverButton)
    }
}

Property Documentation

autoClose : bool

The property drives the automatic closing of the Popover when user taps on the dismissArea. The default behavior is to close the Popover, therefore set to true.

When set to false, closing the Popover is the responsibility of the caller. Also, the mouse and touch events are not blocked from the dismissArea.


caller : Item

The Item such as a Button that the user interacted with to open the Dialog. This property will be used for the automatic positioning of the Dialog next to the caller, if possible.


callerMargin : real

The property holds the margin from the popover's caller. The property is themed.


defaultcontainer : alias

Content will be put inside the foreround of the Popover.


contentWidth : real

contentHeight : real

The properties can be used to alter the default content width and heights.


edgeMargins : real

The property holds the margins from the popover's dismissArea. The property is themed.


pointerTarget : Item

The property holds the item to which the pointer should be anchored to. This can be same as the caller or any child of the caller. By default the property is set to caller.